ADOBE MUSE 
Creación del primer sitio web 
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En este tutorial podrá familiarizarse con el espacio de trabajo de Adobe Muse y aprenderá a crear un sitio web completo sin necesidad de escribir 
código. En la Parte 1 de Creación de su primer sitio web con Adobe Muse se incluyen instrucciones para ayudarle a comenzar a trabajar con 
Muse. Aprenderá a trabajar con páginas maestras, widgets, imágenes colocadas y vínculos. Mientras trabaja en este tutorial podrá ver en todo 
momento la apariencia que tendrá el sitio una vez terminado consultando el sitio web activo de Katie's Café. 


Ir al principio 


Instalación del software y configuración del proyecto de ejemplo 


Descargar e instalar la última versión de Adobe Muse CC. 

Descargar los archivos de ejemplo (ZIP, 78 MB). 

Descomprima el archivo ZIP y guarde la carpeta denominada Katies Café Building v3 en su escritorio. 
Inicie Muse. Aparece la pantalla de bienvenida. Seleccione Archivo > Nuevo sitio. 


Seleccione Adobe Muse CC > Preferencias. En la sección General, seleccione el tema de color deseado para el espacio de trabajo y 
haga clic en OK (véase la Figura 1). 
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Figura 1. Haga clic en una de las muestras de color gris para establecer el tema de color de Adobe Muse. 


Aparece el cuadro de diálogo Nuevo sitio. Utilice esta interfaz para editar la configuración que debe aplicarse a todo el sitio. 


6. Defina el número de columnas en 9. En la sección Márgenes, defina los márgenes superior e inferior en O cuando se desvinculan los 
campos. Defina los márgenes derecho e izquierdo en 4. En la sección Relleno, establezca el relleno superior e inferior en O. Defina la 
anchura de la página en 960 y la altura mínima en 872 (véase la Figura 2). 
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Figura 2. Actualice el número de columnas en el cuadro de diálogo Nuevo sitio. 


Nota: Utilice el menú Resolución para elegir entre las opciones Estándar y HiDPI (2x). Esta configuración permite definir la calidad del resultado 
de los activos cuando se publica o exporta un sitio Muse. Para obtener más información, consulte Creación de sitios web de alta resolución. 


En este tutorial, aprenderá a crear su primer sitio web en Muse para ordenadores de sobremesa. Mantenga el menú Diseño inicial establecido en 
Ordenador, como se encuentra de forma predeterminada. Recuerde que cuando desee crear un sitio web con diseños alternativos para 
smartphones y tablets, puede usar este menú para elegir el diseño con el que desea trabajar en primer lugar. 


La opción etiquetada como Pie de página adhesivo está activada de forma predeterminada. Hace que el pie de página permanezca en la posición 
deseada, incluso si la ventana del navegador es mucho mayor que el diseño de la página web, como ocurre en una pantalla de cine de Apple 
(véase la Figura 3). 
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Figura 3. La opción Pie de página adhesivo está activada de forma predeterminada. 


Cuando la opción Pie de página adhesivo se encuentra activada, el contenido del pie de página queda alineado con la parte inferior de la ventana 
del navegador, independientemente de la resolución y de las dimensiones del monitor de escritorio del visitante (véase la Figura 4). 


Figura 4. Comparación de un sitio activado alejado que tiene la opción Pie de página adhesivo activada (izquierda) y un sitio que tiene dicha 
opción desactivada (derecha). 


En este ejemplo de proyecto de sitio (y en la mayoría de los casos) deberá mantener la opción Pie de página adhesivo activada en el cuadro de 
diálogo Nuevo sitio. 


Nota: la carpeta de archivos de ejemplo katiesCafe contiene una versión final del proyecto de ejemplo denominada katiescafe -final.muse. Si lo 
desea, puede hacer doble clic en la versión final del archivo .muse para abrirlo después de guardar su versión del proyecto como 
katiesCafe.muse. Adobe Muse le permite abrir varios proyectos de sitio a la vez, por lo que puede revisar el archivo katiescafe-final y utilizarlo 
como referencia mientras continúa con estas instrucciones. 


En la siguiente sección, empezará a añadir páginas nuevas al sitio. 


7. Haga clic en OK para guardar los cambios y cerrar el cuadro de diálogo Nuevo sitio. 


8. Seleccione Archivo > Guardar sitio. En el cuadro de diálogo Guardar archivo de Adobe Muse como, introduzca un nombre para el sitio: 
katiesCafe.muse. Vaya a la ubicación en la que desee guardar este proyecto de ejemplo (como la carpeta katiesCafe del escritorio) y haga 
clic en Guardar. 


Ir al principio 


Creación del mapa del sitio 


Un mapa del sitio es una lista estructurada de las páginas que existen en la jerarquía de un sitio web. Puede crear páginas que estén en el mismo 
nivel (sin subpáginas) o puede crear mapas del sitio que contengan niveles diferentes de páginas. (Por ejemplo, un sitio más grande puede tener 
una página Acerca de que contenga dos subpáginas denominadas Nuestro objetivo y Nuestro personal). Muse facilita la creación y reorganización 
de páginas en el orden que prefiera, y nunca tendrá que preocuparse por vínculos rotos. Sin embargo, es importante dedicar algún tiempo a 
organizar el contenido de un sitio nuevo, definir qué páginas son necesarias y decidir cómo presentar la información del sitio. En un proyecto real, 
los procesos de finalizar las diferentes secciones del sitio y elegir el orden de las páginas forman parte de la fase de planificación previa. Para 
obtener más información, consulte Creación del mapa del sitio. 


Después de cerrar el cuadro de diálogo Nuevo sitio, se le redireccionará automáticamente a la vista Plan de Muse. De forma predeterminada, 
todos los sitios nuevos contienen una página web (denominada Inicio) que está vinculada a una página maestra (denominada A-Página maestra). 
Puede ponerle el nombre que desee a ambas. 


Para crear una experiencia coherente, debe colocar en las páginas maestras los elementos repetitivos del sitio, como el encabezado, el pie de 
página y la navegación del sitio. Mediante esta estrategia, al crear el diseño del sitio solo tendrá que añadir el contenido exclusivo de las páginas 
individuales. 


Este proyecto de ejemplo es un sitio pequeño que contiene un total de cinco páginas, incluyendo la página de inicio. Siga los pasos que se 
describen a continuación para agregar páginas nuevas: 


Al hacer clic en el icono de signo más (+) situado debajo de una miniatura de página, se crea una página de subnivel para ampliar una 
sección con páginas relacionadas con un tema específico. 


En este punto, el mapa del sitio tiene un total de cinco páginas: home, food, events, about y visit [inicio, comida, eventos, acerca de y visita] 
(véase la Figura 5). 


1. Pase el cursor por encima de la miniatura de la página de inicio y haga clic en el icono de signo más (+), situado a la derecha de dicha 
miniatura de la página de inicio para crear otra página en el mismo nivel que la primera. Haga clic en el campo de etiqueta debajo de la 
página nueva y póngale un nombre: food (comida). 


2. Haga clic en el icono de signo más (+) situado a la derecha de la miniatura de la página de food (comida) para crear otra página nueva. 
Haga clic en la etiqueta y cambie el nombre de la página: eventos. Haga clic en el icono de signo más (+) situado a la derecha de la 
miniatura de página de eventos para crear una página nueva. Introduzca el nombre la página nueva: acerca de. Repita esta operación de 
nuevo para crear una página nueva más en el mismo nivel que la página de inicio y póngale nombre: visit (visita). 
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Figura 5. Cree un total de cinco páginas en el mapa del sitio. 


Nota: Este sitio de ejemplo contiene cinco páginas en el mismo nivel. Sin embargo, puede crear páginas de subnivel para organizar las páginas 
según desee. Las páginas de subnivel suelen utilizarse para crear diferentes secciones del sitio. Si crea más de una página maestra, puede 
hacer clic con el botón derecho del ratón (o pulsar la tecla Control y hacer clic) en las miniaturas de página en el Modo de plan para establecer un 
vínculo a una página maestra concreta. La primera vez que cree un sitio nuevo, las páginas se vincularán automáticamente a A-Página maestra. 


El Modo de plan proporciona herramientas para estructurar un sitio y generar el mapa del sitio. Si desea cambiar la organización del sitio, puede 
ajustar la disposición de páginas arrastrando las miniaturas de página del mapa del sitio. 


3. Pase el ratón por encima de la miniatura de página GALLERY y haga clic en el signo más (+) situado debajo de él. Haga clic en el campo 
de la nueva página secundaria y llámelo: Gallery-fullscreen (véase la Figura 6). 
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Figura 6. Agregue una nueva página de subnivel al mapa del sitio de la sección de la galería. 


Después de realizar estos cambios, el mapa del sitio se ha completado. 


Tenga en cuenta que en la parte superior de la interfaz de la vista Plan hay tres botones de diseño: Ordenador, Tablet y Móvil. En este proyecto 
de ejemplo, solo se creará un diseño de escritorio para visualizar el sitio en pantallas de ordenador. Los diseños Tablet y Móvil muestran un icono 
de signo más (+) junto al nombre, lo que indica que aún no se han creado (véase la Figura 7). 


Figura 7. Los botones de diseño le permiten crear y desplazarse entre tres diseños alternativos para el sitio. 


Además de hacer clic en los botones de diseño para desplazarse entre los diseños del sitio, también puede utilizar atajos de teclado para 
alternar entre los planes de sitio cuando haya más de un diseño: 


e Pulse Comando+7 (Mac) o Control+7 (Windows) para ir al mapa del sitio Ordenador. 
e Pulse Comando+8 (Mac) o Control+8 (Windows) para ir al mapa del sitio Tablet. 
e Pulse Comando+9 (Mac) o Control+9 (Windows) para ir al mapa del sitio Móvil. 


Estos atajos de teclado solo se activan en proyectos de sitio que contienen al menos dos diseños: Ordenador, Tablet o Móvil. 


Si sigue con el resto de este artículo continuará creando el diseño Ordenador. Para obtener más información sobre el diseño de sitios web para 
tablets y dispositivos móviles, consulte Creación de diseños para dispositivos móviles en Muse. 


En la siguiente sección, aprenderá a editar la página maestra A para añadir los elementos compartidos del sitio, incluido el contenido del pie de 
página. 


Ir al principio 


Edición de la página maestra A 


Comience a diseñar la primera página maestra para el sitio añadiendo las ilustraciones que se mostrarán en todas las páginas vinculadas en el 
sitio. 

Debido a que Muse se comporta como una herramienta de diseño, en segundo plano genera código HTML, JavaScript y CSS estándar para crear 
páginas web. Cuando se decide aplicar un estilo (como redondeado de esquinas y colores de relleno de degradado), Muse no crea una forma 
vectorial o una cuadrícula de píxeles. El proyecto .muse que se publica es un sitio web completamente funcional. Para empezar, actualice el color 
de fondo de la página maestra. 


1. En el modo Plan, haga doble clic en el campo situado debajo de la miniatura de la página maestra A y cambie el nombre de la página 
maestra: Pie de página. A continuación, haga doble clic en la miniatura de la página maestra A para abrirla en el modo de diseño. La 
página maestra se abre en su propia ficha en la parte superior del espacio de trabajo (véase la Figura 8). 


Figura 8. La página maestra A está lista para su edición en el modo de diseño. 


El indicador de selección se encuentra en la esquina superior izquierda del panel de control. Si no se ha seleccionado nada más, el indicador de 
selección muestra la palabra Página, lo que significa que solo está seleccionada la propia página. Si se selecciona un objeto de la página, como 
un rectángulo, se muestra la palabra Rectángulo. 


Mientras trabaja, preste atención al indicador de selección para comprobar que ha seleccionado el elemento que desea editar. Si selecciona otros 
elementos de la página, siempre puede volver a seleccionar toda la página haciendo clic en el área gris a ambos lados de la página. 


Mientras la página está seleccionada, puede usar los menús del panel de control para actualizar la configuración del color de relleno y del trazo. 
De forma predeterminada, el relleno de la página está configurado en ningún color y el trazo de la página está configurada en O. Para este 
diseño, deje la configuración predeterminada. 


2. Haga clic en el vínculo Relleno del navegador para definir el color o imagen de fondo de la ventana del navegador que muestra el área 
exterior de la página. 


3. Para este diseño de página, defina el color de relleno del navegador con un color específico, escriba el valor hexadecimal en el campo: 
#F5F1EE (véase la Figura 9). 
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Figura 9. Actualice la muestra de color en el menú Relleno del navegador. 


4. Haga clic en cualquier lugar fuera del menú Relleno del navegador para cerrarlo. 


Ir al principio 


Configuración de la paleta de colores y cambio de nombres de muestras en el panel Muestras 


Para que después le resulte más fácil aplicar el mismo color a otros elementos del sitio, puede añadir y cambiar el nombre de las muestras de 
color. Esto también le permite modificar una muestra del color con nombre para actualizar todas las instancias de dicho color utilizado en el sitio. 
1. Abra el panel Muestras (Ventana > Muestras). 


2. Seleccione Archivo > Colocar. Busque y seleccione el archivo en la carpeta de archivos de ejemplo llamado color-palette.png. Haga clic en 
cualquier lugar de la página para colocar la imagen. 


3. Haga clic con el botón derecho en el panel Muestras y elija Eliminar todo lo no usado (véase la Figura 10). 
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Figura 10. Seleccione la opción para eliminar todos los colores no utilizados en el sitio. 


Cambio de nombre de colores 


Ahora se muestran los colores utilizados fundamentalmente en el diseño del sitio, junto con las muestras de color gris, blanco y negro genéricas 
del 50%. A continuación, deberá cambiar el nombre de los colores. 

1. Haga doble clic en la muestra del cuadrado de color marrón en la parte más a la derecha. Se abrirá el cuadro de diálogo Opciones de 
muestra para mostrar los atributos de color. Además de especificar un valor de color diferente para la muestra, puede actualizar las 
Opciones de muestra a fin de nombrar un color de muestra de manera descriptiva. 

2. Anule la selección de la casilla de verificación Nombre con valor de color e introduzca un nombre nuevo en el campo Nombre de muestra: 
Marrón oscuro (véase la Figura 11). 
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Figura 11. Asigne un nombre descriptivo a la muestra de color. 


Haga clic en OK para cerrar el cuadro de diálogo Opciones de muestra. 
Repita los pasos del 1 al 3 para cambiar el nombre de la segunda muestra de color de la derecha. Asígnele el nombre: Blanco crudo. 
Cambie el nombre de los dos colores restantes, moviéndose de derecha a izquierda: Marrón claro y Marrón. 
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Seleccione la imagen colocada (color-palette.png) y pulse la tecla Supr o Retroceso para eliminarla. 


A continuación, creará el pie de página que aparecerá en todas las páginas. 


Ir al principio 


Trabajo con elementos con una anchura del 100% 


Los elementos que se definen con una anchura del 100% rellenan el navegador en horizontal, independientemente de la anchura a la que se 
redimensione la ventana del navegador del visitante. Si define un elemento de página para que se alinee también con el borde superior e inferior 
de la ventana del navegador, un objeto relleno con un color sólido o un activo en mosaico también se ampliará para adaptarse al espacio 
disponible. 


1. Dibuje un rectángulo con la herramienta Rectángulo que abarque el ancho de la página y sea de aproximadamente 250 píxeles de alto, 
cerca de la parte inferior de la página. 


2. Con el rectángulo seleccionado, utilice el menú Relleno para establecer el color de relleno del rectángulo en Marrón oscuro y establecer su 
anchura de trazo en 0. Puede saberse cuándo está seleccionado el rectángulo porque aparece a su alrededor un cuadro delimitador azul 
con manejadores y el indicador de selección de la esquina superior izquierda muestra la palabra Rectángulo (véase la Figura 12). 


Figura 12. Arrastre los manejadores en los lados del rectángulo para cambiar su tamaño. 


3. Utilice la herramienta Selección para mover el rectángulo a su posición. Debe ver brevemente un borde rojo que resalta los lados izquierdo, 
superior, inferior y derecho de la ventana del navegador. Este borde rojo indica que el rectángulo se ha configurado para mostrarse en una 
anchura del 100%. 


Nota: Si lo prefiere, también puede abrir el panel Transformar (Ventana > Transformar) y hacer clic en el botón Anchura (100%). 


4. Si desea ver el diseño del sitio sin la superposición de guía, seleccione Ver > Ocultar guías. También puede utilizar el menú Opciones de 
visualización del panel de control para ocultar y mostrar las guías. 


Ir al principio 


Trabajo con botones de estado y botones de Photoshop colocados 


Los botones de estado son elementos de página que se pueden arrastrar y soltar desde la biblioteca de widgets. Aportan un contenedor 
adecuado para crear botones de rollover. Una ventaja de utilizar los botones de estado es que todos los elementos en su interior cambiarán sus 
estados al mismo tiempo, en función de la interacción del visitante. Añada marcos de texto, imágenes, rectángulos, gráficos y botones de 
Photoshop colocados para crear botones personalizados con objeto de adecuarse al diseño de un sitio. 


El botón de estado contiene un punto gris y un marco de texto con las palabras Lorem Ipsum como contenido del marcador de posición. Aunque 
cada uno de estos elementos tiene sus propios estados, responden a la vez al pasar el ratón sobre el botón de estado o hacer clic en él. Si crea 
manualmente un botón con diferentes elementos, puede que solo el texto o solo el punto gris responda a los movimientos del ratón del visitante, 
dependiendo de dónde sitúe el cursor el visitante. 
1. Abra la biblioteca de widgets (Ventana > Biblioteca de widgets). Haga clic en la categoría Botones para expandirla. 
. Seleccione el widget Botón de estado y arrástrelo a la página. 


2 
3. Haga clic en Previsualizar para ver una vista previa de la página. Utilice el cursor para desplazarse y haga clic en el botón predeterminado. 
1 


. Haga clic en Diseño para continuar editando la página. 


N 


Seleccione el punto gris a la izquierda del texto del marcador de posición y pulse la tecla Supr o Retroceso para eliminarlo. 


3. Seleccione Archivo > Colocar botón de Photoshop y busque y seleccione el archivo denominado banner.psd en la carpeta Assets. Deje 
todos los valores predeterminados en el cuadro de diálogo Importar opciones de Photoshop que aparece y haga clic en OK (véase la Figura 
13). 


Opciones de importación de Photoshop (banner.psd) 
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Figura 13. El cuadro de diálogo muestra las capas en el archivo de Photoshop y los menús Estado le permiten elegir qué capa se mostrará para 
cada estado del botón. 


7. Haga clic una vez dentro del botón de estado para colocar el archivo de Photoshop. 
8. Con el gráfico colocado aún seleccionado, haga clic con el botón derecho y seleccione Organizar > Enviar detrás (véase la Figura 14). 
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Figura 14. Cambie la imagen del banner de Photoshop para mostrar detrás del marco de texto. 


9. Seleccione el texto del marcador de posición Lorem Ipsum con la herramienta Texto y escriba: DOWNLOAD MENU. 


10. Con el texto seleccionado, actualice el color del texto en el panel de control o en el panel Texto a blanco crudo. Utilice el menú Fuente para 
elegir la primera opción: Añadir fuentes web. En la interfaz que aparece, busque y seleccione Open Sans Condensed Bold para dar formato 
al texto. 


Nota: Nota: Open Sans Condensed Bold es una fuente web que puede descargar seleccionando Añadir fuentes web en el menú Fuente. Para 
obtener más información sobre el uso de fuentes web, lea Tipografía en Muse: uso de fuentes web, fuentes web seguras y fuentes del sistema. 


11. Defina el tamaño de fuente en 15 y seleccione la alineación centrada. Definir tracking en O y el interlineado en 24 píxeles. Deje el estilo de 
vínculo predeterminado. En el menú Etiqueta de nivel de párrafo, seleccione el subtítulo (h2) para mejorar la optimización para motores de 


búsqueda del sitio (véase la Figura 15). 
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Figura 15. Actualice los estilos de formato con las opciones del panel Texto. 


Consulte el panel Estados para ver que los cuatro estados del marco de texto son idénticos. Ese es el aspecto de este diseño. Sin embargo, 
puede actualizar los colores del texto para los distintos estados, si lo desea. 


12. 


13. 
14. 


15: 
16. 
17. 


Utilice la herramienta Selección para arrastrar los manejadores laterales del marco de texto para hacerlo más ancho, de modo que el texto 
se ajuste. Arrastre el marco de texto horizontalmente hasta que se centre dentro del botón de estado. Cuando el marco de texto esté 
centrado en el botón de estado, se mostrará brevemente una guía vertical azul oscura. 


Presione Esc una vez para seleccionar el botón de estado completo. 


Abra el panel Estados (Ventana > Estados) para previsualizar el aspecto de los cuatro estados: Normal, Rollover, Ratón pulsado y Activo. 
El estado Normal aparece seleccionado. Este panel le permite editar las distintas formas en las que se muestra el gráfico del botón, 
dependiendo de la actividad del cursor del visitante. 


Utilice el menú Relleno para establecer el color de relleno del botón de estado en Ninguno. 
Repita los pasos 14 y 15 para definir el color de relleno de todos los estados en Ninguno. 


Utilice la herramienta Selección para colocar el botón de estado cerca de la parte superior del rectángulo marrón, utilizando las guías de 
alineación para centrarlo verticalmente en la página (véase la Figura 16). 


BOWNLOAD MENU 


Figura 16. Centre el botón de estado personalizado en la parte superior del área de pie de página. 


Ir al principio 


Configuración de las opciones de trazo de un rectángulo para crear líneas 


A fin de añadir un poco de detalle visual, creará una línea y después la duplicará. 


1; 


2: 
3. 


Utilice la herramienta Rectángulo para dibujar un rectángulo a la izquierda del botón de estado que es de aproximadamente 377 píxeles de 
ancho y 15 píxeles de alto. Aparecerá una sugerencia con las dimensiones del rectángulo a medida que se dibuja. 


Configure el color de relleno en Ninguno y el color de trazo en blanco crudo. 
Haga clic en la palabra Trazo del panel de control para abrir las opciones de trazo. 
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4. Mantenga la configuración de alineación predeterminada: Alinear trazo al centro. Haga clic en el icono de enlace para permitir las diferentes 
anchuras de trazo para cada lado del rectángulo. Defina la anchura de los trazos inferior, izquierdo y derecho en 0, de modo que solo la 
parte superior tenga una anchura de trazo de 1 (véase la Figura 17). 


Alinear: kk 


Dei], Bio] 
Aep ] Of] 


Figura 17. Actualice la configuración de la opción de trazo para mostrar únicamente un trazo en la parte superior del rectángulo. 


] e (HE 7 


Elo 


5. Haga clic en cualquier otra parte de la página para cerrar el cuadro de diálogo Opciones de trazo. 


6. Utilice la herramienta Selección para colocar el rectángulo de modo que se encuentre a la izquierda del botón de estado y el borde superior 
esté centrado horizontalmente. 


7. Opción y arrastre el rectángulo para duplicar el rectángulo. Colóquelo a la derecha del botón de estado (véase la Figura 18). 


DOWNLOAD MENU 


Figura 18. Alinee horizontalmente los dos rectángulos entre sí y con el botón de estado. 


Siga leyendo este tutorial. En el capítulo siguiente, aprenderá a trabajar con los widgets de menú. Los widgets permiten agregar rápidamente 
funcionalidades avanzadas a las páginas sin escribir código. Aprenderá a modificar el comportamiento y la apariencia de los widgets para 
personalizar el modo en el que se muestran en del diseño del sitio. 


Los términos de Creative Commons no cubren las publicaciones en TwitterTM y Facebook. 


Avisos legales | Política de privacidad en línea 
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Capítulo 2 


Trabajo con los widgets de menú 

Creación y aplicación de estilos de párrafo 

Adición de iconos de Font Awesome Brand a una página 

Adición de vínculos a archivos descargables 

Adición de vínculos a sitios web externos 

Creación de vínculos de correo electrónico 

Uso de guías para definir las regiones de encabezado y pie de página de una página 
Configuración de elementos de página como elementos de pie de página 

Adición de un anclaje en la parte superior de la página 


En el Capítulo 1 de Creación del primer sitio web con Muse, ha creado un nuevo sitio, utilizado el modo Plan para crear las páginas del sitio y 
editado la página maestra en modo Diseño para añadir elementos de página al pie de página. En esta sección, aprenderá a añadir y personalizar 
los widgets. El primer tipo de widget que añadirá se denomina widget de menú y ayudará a los visitantes a navegar a las páginas del sitio. 
También conocerá los diferentes tipos de vínculos que puede agregar en Adobe Muse. 


Ir al principio 


Trabajo con los widgets de menú 


El pie de páginas maestras normalmente incluye la navegación del sitio, por lo que será eso lo que añadiremos a continuación. 


1. Abra la Biblioteca de widgets; seleccione Ventana>Biblioteca de widgets. 


2. En la biblioteca de widgets, haga clic en la sección de menús para expandirla. Seleccione el widget horizontal y arrástrelo del panel a la 
zona de pie de página de la página maestra A (véase la Figura 19). 


Figura 19. El widget horizontal muestra el estilo predeterminado cuando se arrastra a una página. 


El panel negro que aparece siempre que arrastra un widget desde la biblioteca de widgets se llama panel de opciones. Haga clic lejos del panel 
para cerrarlo. Puede hacer clic en el botón de flecha azul siempre que quiera volver a acceder de nuevo. 


El menú muestra automáticamente los nombres de las páginas que ha creado, en el mismo orden en el que aparecen en el mapa del sitio. Los 
nombres de las páginas están vinculados automáticamente a las páginas y se actualizan de manera dinámica. Si posteriormente cambia de 
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nombre o mueve la página en modo Plan, se actualizan los widgets de menú y vínculos de menú siguen funcionando según lo esperado. 


Aunque cada tipo de widget ofrece distintas funcionalidades, muchos de los conceptos que se utilizan al trabajar con widgets son los mismos. 
Busque el widget que desea utilizar en la biblioteca de widgets y, a continuación, arrástrelo hasta la página. Cada widget contiene una jerarquía 
de elementos de widget anidados. Cuando seleccione un widget, podrá continuar haciendo clic para descubrir sus elementos secundarios. Al 
hacer esto, podrá ver que el indicador de selección de la esquina superior izquierda muestra el nombre del elemento que está seleccionado en 
ese momento. 


Por ejemplo, cuando se hace clic por primera vez en el widget, el propio widget se selecciona. Si hace clic de nuevo, puede seleccionar un 
elemento segundario, como un contenedor y, a continuación, hacer clic de nuevo para seleccionar el marco de texto dentro del contenedor. Para 
trabajar fuera del elemento secundario seleccionado, pulse la tecla Esc. Para anular la selección, también puede hacer clic en cualquier lugar de 
la página fuera del área del widget. 


Cuando todo el widget esté seleccionado, podrá cambiar su posición. Es posible arrastrar los manejadores de transformación para cambiar la 
escala o el tamaño de las dimensiones de todo el widget. Puede definir el color del relleno y del trazo, así como aplicar estilos para controlar el 
aspecto de todo el widget. 


3. Utilice la herramienta Selección para colocar el widget de menú debajo del botón de estado, centrado verticalmente. 


Configuración y personalización de widgets 


Para configurar widgets, actualice los ajustes en el panel Opciones. El panel Opciones es contextual y le permite aplicar cambios para actualizar 
los ajustes específicos para ese widget al completo, o el elemento secundario seleccionado del widget. Algunos widgets tienen más opciones que 
otros. El panel Opciones permite controlar el comportamiento de los widgets y cómo se muestra su contenido. 


Mientras un elemento contenedor está seleccionado, por ejemplo un elemento de menú, puede aplicar estilo al widget definiendo las opciones de 
relleno y de trazo. Cuando se seleccionan etiquetas de texto, es posible utilizar el panel Texto o las opciones de texto del panel de control para 
aplicar estilo al texto. A veces, deberá editar las etiquetas de texto en los widgets. Sin embargo, a menos que configure los widgets de menú 
para que utilicen el Tipo de menú manual, ya habrá configurado los nombres de las páginas según las páginas del mapa del sitio 


1. Haga clic en el widget de menú una vez y observe que el indicador de selección muestra la palabra: Menu. Haga clic en el botón azul de 
flecha para acceder al panel Opciones (véase la Figura 20). 


Tipo de menú: Páginas de nivel su. 
Dirección: Horizontal 
Y Editar conjurtamente 
Tamaño de elemento: Tamaño uniforme 


Partes 


Mostrar icono a la izquierda 


V Mostrar etiqueta 


Mostrar icono a la derecha: Solo submenús 


Posición de las partes Horizontal; centrado 


Figura 20. Abra el panel Opciones para configurar los ajustes del widget. 


Asegúrese de que se establecen las siguientes opciones predeterminadas, como se muestra en la Figura 22. 


e Tipo de menú: páginas de nivel superior 

e Dirección: horizontal 

e Editar conjuntamente: activado 

+ Tamaño del elemento: tamaño uniforme 

e Mostrar icono a la izquierda: desactivado 

e Mostrar etiqueta: activado 

+ Mostrar icono a la derecha: solo submenús 
e Posición de las partes: horizontal; centrado 


La configuración del menú Opciones le permitirá configurar el comportamiento del menú. 
A continuación, aprenderá a editar el aspecto de los botones del menú, y cómo controlar el formato de texto para que coincida con el diseño del 
sitio. 


2. Haga clic en cualquier otra parte de la página para cerrar el menú Opciones. 
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Aspectos básicos de los estados de los botones 


1. Seleccione Archivo > Vista previa de sitio en navegador para previsualizar el sitio y para comprobar el widget de menú. 


2. Mire los botones del menú cuando cargue la página por primera vez (este estado se conoce como estado Normal). Sitúe el cursor sobre los 
botones para ver si aparece el estado de rollover. Al hacer clic en un botón, la página correspondiente se carga y el botón se muestra con 
un color gris más oscuro, que es el estado activo predeterminado. El estado activo indica la página seleccionada actualmente mientras que 
los visitantes navegan por el sitio. 


Nota: si hace clic y mantiene pulsado el botón del ratón, hay un estado adicional, Ratón pulsado, que muestra un aspecto personalizado cuando 
el visitante hace clic en el botón. 


Edición de los estados de botón 


A continuación, verá cómo editar el estado de un botón. 


1. Cierre el navegador y vuelva a Adobe Muse. 


2. Haga clic en el widget una vez para seleccionar el menú completo. Haga clic en el botón de comida una vez más para seleccionar el 
elemento del menú de comida (consulte la Figura 23). Si, accidentalmente, hace clic una tercera vez y el indicador de selección muestra la 
palabra Etiqueta, pulse la tecla Esc una vez para subir un nivel en la jerarquía, de forma que aparezca la palabra Elemento de menú. 


Nota: Si, accidentalmente, hace clic una tercera vez y el indicador de selección muestra la palabra Etiqueta, pulse la tecla Esc una vez para subir 
un nivel en la jerarquía, de forma que el indicador de selección muestre de nuevo la palabra Elemento de menú. 


Como la opción Editar conjuntamente está activada en el panel Opciones, los cambios que se realicen en el aspecto de este elemento de menú 
se aplicarán al resto de botones del widget de menú. Esto agiliza la edición. A menos que necesite aplicar un estilo diferente a cada botón, 
mantenga la opción Editar conjuntamente activada. 


Los botones grises definen la apariencia de cada estado (véase la Figura 21). 


3. Abra el panel Estados mediante la selección de su ficha o en Ventana > Estados. 


Normal 


v 


Figura 21. Utilice el panel Estados para elegir los diferentes estados y editar su apariencia. 


4. En el panel Estados, haga clic en cada elemento de la lista: estados normal, rollover, ratón pulsado y activo. Tenga en cuenta que al hacer 
clic en los estados del panel, el widget de menú de la página se actualiza para mostrar el aspecto del estado. 

5. Haga clic en el estado Normal. Si está seleccionado el elemento de menú INICIO, use el menú Relleno para establecer el color de relleno 
en Ninguno. Cuando se establece un color diferente de relleno para el botón INICIO, todos los elementos de menú actualizan su estado 
Normal porque la opción Editar conjuntamente está activada. 

6. Haga clic en el estado de rollover en el panel Estados y establezca el color de relleno en Ninguno. Repita este proceso dos veces más para 
definir el color de relleno de los estados Ratón pulsado y Activo en Ninguno. Esto elimina el color de relleno de fondo para crear botones 
transparentes. 


Más tarde, cuando realice sus propias páginas, podrá experimentar y establecer un color de relleno para todo el widget y, a continuación, 
establecer un color de relleno distinto para los elementos de menú. También puede añadir imágenes de fondo para rellenar los elementos de 
menú. 


A continuación, actualizará la apariencia de las etiquetas de botón mediante un proceso de edición similar. 


14 


Edición de etiquetas de los widget de menú 


Siga estos pasos para actualizar el formato de las etiquetas de texto que muestran los nombres de página en cada elemento de menú. 


Para obtener más información sobre el uso de fuentes web, lea 


1. Si está seleccionado el elemento de menú INICIO, haga clic en el botón de nuevo para seleccionar el texto dentro del botón. La palabra 
Etiqueta se muestra en el indicador de selección. 

2. En el panel Estados, asegúrese de que el estado Normal está seleccionado. 

3. Para abrir el panel Texto, haga clic en su ficha o elija Ventana > Texto. 


4. Actualice el texto utilizando el menú Texto en el panel de control o el panel Texto. Defina el color como blanco crudo. En el menú Fuente, 
seleccione la primera opción: Añadir fuentes Web. En la interfaz que aparece, busque y seleccione la fuente web Open Sans para 
agregarla. A continuación, selecciónela de la lista de fuentes para aplicarla. 


5. Defina el tamaño de fuente en 12 y utilice la alineación centrada. Defina el tracking en 1 y el interlineado en 120% (véase la Figura 22): 


| @ Open Sans v | 
| 
iL E 14 y | Color: My 


ahg [Estilo de vínculo predete... | v 
k> | <p> (Párrafo) v 


Figura 22. Defina las opciones en el menú Texto para actualizar el aspecto de la etiqueta de menú. 


Ir al principio 


Creación y aplicación de estilos de párrafo 


1. Abra el panel Estilos de párrafo haciendo clic en su ficha o en Ventana > Estilos de párrafo. 


2. Haga clic en el botón Nuevo estilo (icono de página) en la parte inferior del panel para guardar este conjunto de estilos de fuente, lo que 
permite aplicarlos fácilmente a otros elementos de texto más adelante. 


3. Haga doble clic en el nuevo estilo que acaba de crear en el panel Estilos de párrafo, al que se le ha dado el nombre predeterminado de 
Estilo de párrafo. Cambie el nombre del pie de página en el menú (véase la Figura 23). 


Opciones de estilo de párrafo 


Nombre de estilo: 


Etiqueta de párrafo: | <p> (Párrafo) z 


Configuración de estilo: 


espacio antes: 1 + tamaño: 12 + alinear: centro + color: Blanco + 
Etiqueta HTML: p 


E 


Figura 23. Haga clic en Estilo nuevo (icono de página) para añadir un nuevo estilo de párrafo y, a continuación, haga doble clic en el nuevo estilo 
e introduzca un nombre descriptivo en el campo Nombre de estilo. 


Nota: Haga clic con el botón derecho (o pulse la tecla Control y haga clic) en el nombre de un estilo en el panel Estilos de párrafo para ver un 
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menú que le permitirá duplicar, eliminar o desvincula estilos. También puede seleccionar Opciones de estilo en el menú, en lugar de hacer doble 
clic en el nombre de estilo, para acceder a las opciones de Estilo de párrafo. 


Tenga en cuenta que en la ventana Opciones de estilo podrá aplicar un estilo a una etiqueta HTML concreta. 


Si busca en el panel Estados, se dará cuenta de que todos los estados (Normal, Rollover, Ratón pulsado y Activo) utilizan el mismo formato de 
fuente para las etiquetas del elemento de menú. 


1. Haga clic en Previsualizar para ver el diseño tal y como aparece en un navegador. Muse utiliza para mostrar la página una versión de 
Webkit que muchos navegadores web modernos utilizan. Al interactuar con el menú, se debe tener en cuenta que los botones solo 
muestran sus etiquetas (los contenedores del elemento de menú son transparentes). También tenga en cuenta que las etiquetas no 
cambian cuando se desplaza el cursor o hace clic en los botones del menú. 


2. Después de probar el menú, haga clic en Diseño para continuar editando la página maestra A. 


Ir al principio 


Adición de iconos de Font Awesome Brand a una página 


En lugar de agregar imágenes colocadas, que tardan más en cargarse y son más tediosas de crear y de editar, puede colocar elementos de Font 
Awesome en la página. Estos elementos son similares a las fuentes web. Puede añadir elementos de fuente, que incluyen muchos iconos 
comunes. Para actualizarlos, utilice la configuración del panel de control o el panel Texto del mismo modo que los marcos de texto de estilo. 

1. En un navegador, visite el widget Font Awesome en la biblioteca del complemento Adobe Muse. 


2. Haga clic en el botón Descargar para descargar la extensión a partir de la fuente comprimida (con la extensión de archivo .mulib) en el 
escritorio. No expanda el archivo descargado. 


3. Abra el panel Biblioteca (Ventana > Biblioteca). 
4. Haga clic en el botón Importar y busque y seleccione el archivo .mulib descargado en el paso 2. 
5. El elemento de biblioteca de FontAwesome (icono) se muestra en el panel Biblioteca (consulte la Figura 24). 


Biblioteca 


Encontrará más elementos de 
biblioteca en Internet 


» Library Items 


9 +h +h 


TI 


Figura 24. Después de importar elementos de biblioteca aparecerán en el panel, listos para usarse. 


6. Haga clic en la flecha para expandir la carpeta de iconos de FontAwesome. 
7. Arrastre un elemento de los iconos al área del pie de página. 


8. Haga clic en el botón de flecha azul para abrir el panel Opciones y elija la opción de Facebook en el menú. 


Puede ver una barra de progreso conforme se carga el icono en la vista Diseño. Esto sucede porque los iconos se alojan en un servidor diferente 
como fuentes web. 


9. En el panel de control, establezca el color de relleno en marrón. En el panel Texto, defina el color de fuente del blanco (véase la Figura 25). 
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Figura 25. Actualización del aspecto del icono de Facebook definiendo el color de relleno y de texto. 


10. Repita los pasos del 7 al 9 para crear 4 iconos más en Google+, Tumblr y Twitter. Utilice la herramienta Selección para alinear 
horizontalmente (véase la Figura 26). 


Figura 26. Alinee el conjunto de cuatro iconos de redes sociales en una fila, utilizando las guías inteligentes para organizarlos coherentemente. 


11. Seleccione todos los iconos de las redes sociales y elija Objeto > Agrupar para agruparlos en un conjunto. Arrastre el grupo en la página 
hasta que se centre verticalmente debajo del botón Download menu (descargar menú) y del widget de menú. 


Ir al principio 


Adición de vínculos a archivos descargables 


Muchos sitios del restaurante publican su menú en línea en formato PDF para que los visitantes puedan guardar una copia en su escritorio o 
imprimirla. 
1. Seleccione el widget Botón de estado. 


2. Utilice el menú Hipervínculos del panel de control para seleccionar el elemento de la sección de archivos en la parte inferior del menú, 
Vincular a archivo. En el cuadro de diálogo Importar que aparece, seleccione el archivo denominado Katie's Cafe Menu.pdf en la carpeta de 
archivos de ejemplo. Haga clic en Abrir para seleccionarlo (véase la Figura 27). 


Plan Diseño Previsualizar Publicar 


> TIT TEA pora 7] Al inone] z 
a Cargar 
r [es] = mim» m Aavo TECN 
FAVORITOS z 
La Escritorio CONTACT 
Eg Temporary hems a Img-cookie. jpg Img-cupcakes GALLERY 
PA 
% Documentos GALLERY Gallery-fullscreen 
Desca 
O Descargas Py MENU 
MULTIMEDIA PE Y Archivos 
Ji Música 
© Fotos img-dinner jog img-drinks jog img-hero jpi WARNAN h 
H Videos 
e za mm 
Activar: Activo 
Cancelar [Abrir | 


. 
° DOWNLOAD MENU 


Figura 27. Busque y seleccione la versión PDF del menú. 
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Cuando utilice la función Vincular a archivo, se carga el archivo cuando el sitio se publica o se incluye en la carpeta del sitio cuando se exporta el 
sitio. Se recomienda copiar todos los archivos del sitio en la carpeta del sitio local. 


Si observa el panel Activos, verá que el archivo KatiesCafeMenu.pdf aparece ahora como uno de los activos del sitio. 


Dependiendo del navegador que está utilizando, algunos navegadores mostrarán el PDF en la ventana del navegador mientras que otros 
simplemente descargarán el archivo PDF en su escritorio. 

3. Seleccione Archivo > Vista previa de página en navegador. 

4. Haga clic en el vínculo Download menu (Descargar menú) y compruebe las muestras vinculadas del archivo PDF. 


Ir al principio 


Adición de vínculos a sitios web externos 


Puede agregar vínculos absolutos a otras páginas web fuera del sitio. Siga estos pasos para añadir vínculos externos a cada uno de los iconos 
de las redes sociales. 


1. Seleccione el icono de Facebook y, a continuación, escriba (o copie/pegue) el vínculo a la página de Facebook de Katie's Café en el campo 
del menú Hipervínculo: http://www.facebook.com/KatiesCafeSF 

Seleccione el icono de Google+ e introduzca el vínculo a la página de Katie's Café en Google+: 

Seleccione el icono de Tumblr e introduzca el vínculo al blog de Katie's Café en Tumblr: http://katiessf.tumblr.com 

Seleccione el icono de Twitter e introduzca el vínculo a la página de Katie's Café en Twitter: http://twitter.com/katiescafesf 


gap? on 


Haga clic en el icono de Facebook nuevamente para seleccionarlo. En el panel de control, haga clic en la palabra Hipervínculos subrayada 
en azul. En el cuadro de diálogo que aparece, seleccione la opción: Abrir el vínculo en una nueva ventana o ficha. Introduzca también una 
descripción en el campo de información (véase la Figura 28). 


Plan Diseño Previsualizar Puk 


y] Hipervínculos: | http: //www.face... v>: $ 


Si Abrir el vínculo en una nueva ventana o ficha 


Sugerencia: | Follow Katie on Facebook 
Estilo de vínculo de texto: | [Estilo de vínculo predetermin... + 


Editar estilos de vínculo 


Figura 28. Active la casilla para abrir el vínculo en una nueva ventana o ficha. 


6. Repita el paso 5 para configurar los vínculos de Google+, Tumblr y Twitter y abrirlos también en una nueva ventana del navegador. Escriba 
la información sobre cada vínculo (que aparece cuando un visitante pasa el ratón sobre los botones de los iconos de las redes sociales). 


Esta es una convención de diseño web común: los vínculos que van a otras páginas del mismo sitio se abren en la misma ventana del navegador 
(lo que ocurre por defecto en Adobe Muse) y los vínculos a páginas en otros sitios web externos se suelen abrir en una nueva ventana o ficha. 


Ir al principio 


Creación de vínculos de correo electrónico 


Este sitio de ejemplo utiliza el widget de formulario de contacto simple para permitir que los visitantes envíen mensajes. Más adelante en este 
artículo, aprenderá a añadir un formulario de contacto en la página de contacto. 


Si lo desea, puede añadir los vínculos de correo electrónico (que, cuando se hace clic en ellos, provoquen que se inicie el cliente de correo 
electrónico del visitante con un mensaje que indica la dirección de correo electrónico en el campo Para). 


Introduzca la dirección de correo electrónico con la expresión mailto: en el menú Hipervínculo, así: 
mailto:emailOdirección.com 


La lista de vínculos en el menú de los hipervínculos puede alargarse en sitios web más grandes. Para buscar una página específica, vínculo de 
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anclaje, archivo enlazado o URL externa, puede filtrar la lista rápidamente escribiendo las primeras letras del vínculo en el campo del menú 
Vínculos para ver los elementos coincidentes. 


Ir al principio 


Uso de guías para definir las regiones de encabezado y pie de página de una página 


Al diseñar páginas individuales, suelen variar en altura, dependiendo del contenido añadido a cada página. En Muse puede configurar regiones, 
de manera que el encabezado siempre permanezca en la parte superior y el contenido del pie de página siempre se muestre directamente debajo 
del contenido de la página, independientemente de su altura. 


Siga estos pasos para ver las guías y configurar las áreas de página: 


1. Para mostrar las guías de encabezado y pie de página, elija Ver > Mostrar encabezado y pie de página. Como alternativa, puede utilizar el 
menú Ver del panel de control para activar las guías de encabezado y pie de página. Cuando están visibles, aparece una casilla de 
verificación junto al elemento de encabezado y de pie de página (véase la Figura 29). 


100% [y] a) puto 

y Reglas 

| Relleno: [/ y Guías ) E 
Y Encabezado y pie de página 


5  Cuadrícula solapada 

v Guías inteligentes 

v Indicadores de marcos de texto rasterizados 
v Anclajes 


Figura 29. Compruebe que las guías de encabezado y pie de página estén visibles. 


Si lo prefiere, también puede hacer clic con el botón derecho en la parte izquierda del espacio de trabajo, fuera de la ventana del navegador y 
elegir la opción Mostrar al encabezado y al pie de página en el menú que aparece. 


Las reglas también deben estar visibles para colocar las guías de encabezado y pie de página, para que pueda establecer las guías en una 
posición de píxeles específica. 


Cinco guías horizontales azules abarcan el ancho de la página. Comenzando por la parte superior, estas cinco guías se utilizan para definir la 
parte superior de la página, la parte inferior del encabezado, la parte superior del pie de página, la parte inferior de la página web y la parte inferior 
de la ventana del navegador. Al arrastrar las guías para definir estas áreas, un texto de sugerencia describe cada guía y muestra su ubicación 
actual. Puede aumentar la ampliación de la página, para colocar las guías con mayor precisión. 


Nota: La parte inferior de la guía de la ventana del navegador establece la parte inferior de la pantalla que se muestra a los visitantes. En función 
del diseño, puede establecer una imagen de color o de relleno de fondo para rellenar el navegador y establecer la guía en la parte inferior de la 
página sobre la parte inferior de la guía del navegador, si desea que el contenido de relleno del navegador se muestre debajo del contenido de 
cada página. 


En este proyecto de ejemplo, el relleno del navegador no se muestra debajo del contenido de la página. 


2. Arrastre la guía de la parte inferior de la página y la guía de la parte inferior del navegador a la misma ubicación de la parte inferior de la 
página, justo debajo del rectángulo del pie de página, como se muestra en la Figura 30. 
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| Parte inferior de la página, arrastre para ajustar el tamaño de página mínimo. —== 
_Parte inferior del navegador, arrastre para ajustar el relleno bajo la página. EE 


Figura 30. Si las guías de la parte inferior de la página y de la parte inferior del navegador se encuentran en la misma ubicación, el contenido de 
relleno del navegador no se muestra bajo la parte inferior de la página. 


Las tres guías superiores definen las regiones para el contenido mostrado en el encabezado, el pie de página, y el contenido exclusivo; el área 
central se amplía para ajustarse a la altura de los elementos agregados a cada página. 


Después de realizar estos cambios, el apartado de pie de página se ha completado. 


3. Arrastre la guía Pie de página hasta que se encuentre ligeramente sobre la parte superior del rectángulo del pie de página, a 
aproximadamente 620 px. 


4. Deje la guía Principio de la página en la parte superior (en la ubicación Y: O px). Arrastre la guía Encabezado hasta Opx también. 


Ir al principio 


Configuración de elementos de página como elementos de pie de página 


Asegúrese de establecer los elementos del área de pie de página como elementos de pie de página. Esto garantiza que el pie de página se 
muestre siempre en cada página por debajo del contenido exclusivo de página. Siga estos pasos: 


1. Utilice la herramienta Selección para seleccionar todo el contenido de la página del pie de página. Puede hacer clic y arrastrar los 
elementos en el pie de página, o bien elija Edición > Seleccionar todo. 


2. Haga clic con el botón derecho en los elementos y asegúrese de que la opción Elemento de pie de página está marcada en el menú que 
aparece. Como alternativa, compruebe que la casilla de pie de página en el panel de control esté activada (véase la Figura 31). 


- Cortar 
Copiar 


. Pegar 
DOWNLOAD MENU 


Mover a capa 
Añadir a la biblioteca 


Desagrupar 


Bloquear 
Ocultar 


Y Elemento de pie de página 


Figura 31. Compruebe que los elementos seleccionados del pie de página se establecen como elementos de pie de página. 


Ir al principio 


Adición de un anclaje en la parte superior de la página 
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El contenido de la página maestra del pie de página aparece en el resto de páginas del sitio. Es una buena ubicación para añadir el anclaje que 
permitirá a los visitantes ir a la parte superior de las páginas más largas. 


1. Haga clic en el botón de anclaje en el panel de control para cargar un anclaje en el cursor de colocación. 


2. Asigne un nombre al anclaje top y colóquelo en la parte superior de la página (véase la Figura 32). 


[C Pie de página Fijar: Lo xEHa60 ] i 
cree | 
Haga clic para cargar un anclaje de vinculo en el cursor de colocación (A) 


AA : PEPEPEPE FO PEPEPEPE PI Ls iia data 


lb] to 


Figura 32. Crear un anclaje con nombre top y colóquelo en la parte superior del área de página. 


Vaya al capítulo 3 de Creación de su primer sitio web, donde descubrirá en qué consisten las páginas maestras jerárquicas y aprenderá a aplicar 
páginas maestras a páginas individuales. También verá cómo crear activos de sitio reutilizables y almacenarlos en el panel Biblioteca. 


Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook. 


Avisos legales | Política de privacidad en línea 
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Capítulo 3 


Trabajo con páginas maestras jerárquicas 

Creación del encabezado de la página maestra Interior 

Creación del encabezado de la página maestra de aterrizaje 

Aplicación de páginas maestras a las páginas del diseño 

Relleno de un rectángulo con una imagen de fondo 

Aplicación de formato y estilo a contenido de texto 

Diseño de un separador de página decorativo con elementos agrupados 
Creación de un elemento de biblioteca reutilizable 

Alineación de elementos de página mediante las guías de la cuadrícula de la página 
Aplicación de estilo a diferentes líneas de texto dentro del mismo marco de texto 
Relleno del resto de la página de inicio 


En el capítulo 2 del tutorial de creación del primer sitio web con Adobe Muse, ha creado nuevas páginas maestras y ha añadido navegación del 
sitio mediante un widget de menú. Ha aprendido a profundizar en los elementos secundarios de los widgets, para seleccionarlos y editar la 
apariencia de estados y etiquetas con el panel Estados. También ha comprobado cómo añadir contenido de texto y aplicar estilo mediante estilos 
de párrafo, y ha realizado un repaso rápido del uso del archivo un archivo de biblioteca de Muse para añadir la biblioteca Font Awesome con 
iconos de página de carga rápida. En esta sección, verá cómo crear sus propios elementos de biblioteca y cómo reutilizarlos en las páginas. 


Ir al principio 


Trabajo con páginas maestras jerárquicas 


Haga clic en el vínculo Plan o en la ficha denominada katiesCafe para volver al modo Plan 


Tenga en cuenta que todas las miniaturas de página del sitio actual muestran los elementos de diseño que se han añadido a la página maestra 
Pie de página vinculada (véase la Figura 33). 


E al bl eel lego! 


HOME MENU GALLERY BLOG CONTACT 
[Footer Footer [Footer] [Footer [Footer] 


Gallery-fullacreen 
[Footer] 


Footer 
On pig. maes] 


Figura 33. El diseño de la página maestra Pie de página se muestra en todas las miniaturas de página vinculadas al modo Plan. 


Al diseñar un sitio, los cambios realizados en la página maestra actualizarán automáticamente las páginas vinculadas. Las páginas maestras 
facilitan la actualización y el mantenimiento de un sitio. Puede actualizar una página maestra para cambiar la apariencia del sitio. 


Puede aplicar páginas maestras a otras páginas maestras. Una página maestra puede contener elementos compartidos que se muestran en una 
página maestra distinta (como el pie de página que se describe en las secciones anteriores) y, posteriormente, puede crear páginas maestras 
adicionales que heredan todos los elementos de dicha página maestra, además de cualquier otro elemento que sea exclusivo de una sección del 
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sitio. 
También puede mover elementos copiados entre las páginas maestras mediante Edición > Pegar en contexto. 


Cuando coloque el ratón sobre el nombre de una página o página maestra, una sugerencia mostrará la jerarquía de las páginas maestras 
aplicadas a dicha página o página maestra. 


Realice los siguientes pasos para crear una nueva página maestra que herede el contenido de la página maestra Pie de página: 
1. En el modo Plan, coloque el ratón sobre la miniatura de la página Pie de página y haga clic en el signo más (+) en el lado derecho para 
crear una nueva página maestra. 


2. Aparece una nueva página maestra a la derecha de Pie de página, denominada B-Página maestra. Cambie el nombre de la página 
maestra: Página de aterrizaje. 

3. Haga clic con el botón derecho en la miniatura de la página maestra de la copia de Pie de página y seleccione Páginas maestras > Pie de 
página en el menú contextual. Observe que al hacer esto la etiqueta [Pie de página] se muestra bajo la miniatura, lo que indica que la 
página maestra de aterrizaje hereda el contenido de la página maestra Pie de página (véase la Figura 34). 


o 


Páginas maestras s 
Nueva página maestra 


Duplicar página 

Eliminar página 

Cambiar nombre de página 
Abrir página 


Propiedades de la página... 
Restaurar propiedades de la página 


Páginas maestras Sin página maestra 


Footer Landing Interior 
¡Sin pág. maes.] [Footer] | 


Figura 34. Defina la página maestra de aterrizaje para que herede el contenido de la página maestra Pie de página. 


Es importante distinguir que la página maestra de aterrizaje no incluye realmente los elementos de la página maestra Pie de página, no se trata 
simplemente de duplicar la página Pie de página (A-Página maestra). En su lugar, se ha aplicado la página maestra Pie de página a la página 
maestra de aterrizaje, lo que significa que cualquier contenido nuevo que añada a la página maestra Pie de página también aparecerá 
automáticamente en la página maestra de aterrizaje. Si necesita editar el contenido del pie de página, haga doble clic en la miniatura de la página 
maestra Pie de página para abrirla directamente. 


Después de añadir los elementos de diseño a las páginas maestras Interior y de aterrizaje, se aplicarán las páginas maestras a las páginas del 
mapa del sitio. En este diseño, la página de inicio utiliza la página maestra de aterrizaje, y en el resto de las páginas del sitio se ha aplicado la 
página maestra Interior. 


Si coloca el ratón sobre las miniaturas de las páginas maestras Interior y de aterrizaje, aparece la indicación: Página maestra aplicada: Pie de 
página. 

En este sitio de ejemplo, la jerarquía de la página maestra solo tiene un nivel de profundidad. Sin embargo, puede crear una cadena de páginas 
maestras, donde una página maestra que hereda otra página maestra completa se puede aplicar a una tercera página maestra, para crear los 


niveles de la herencia de varios niveles. La división de elementos de diseño es similar a la creación de símbolos. Se recomienda crear páginas 
maestras independientes para las diferentes secciones de un sitio. 


4. Coloque el ratón sobre la miniatura de la página maestra de aterrizaje y haga clic en el signo más (+) en el lado derecho para crear una 
tercera página maestra. Cambie el nombre a Interior. 


5. Haga clic y arrastre la miniatura de la página maestra Pie de página a la nueva miniatura de la página maestra Interior. Observe que, al 
arrastrar y soltar la miniatura de la página maestra Pie de página en la miniatura de la página Interior, el texto azul que aparece bajo la 
miniatura de la página Interior se actualiza de [Sin página maestra] a [Pie de página]. 


Ir al principio 


Creación del encabezado de la página maestra Interior 


La página maestra Interior definirá la apariencia de la mayoría de las páginas del sitio. 


1. Haga doble clic en la miniatura de la página maestra Interior para abrirla en modo de diseño. 


2. Dibuje un rectángulo de 90 píxeles de alto aproximadamente que abarque toda la anchura de la ventana del navegador. Arrastre los 
manejadores laterales hasta que la visualización se establezca en una anchura del 100%. Alinee la parte superior del rectángulo con la parte 
superior de la página. 

3. Establezca el color de relleno del rectángulo en marrón y la anchura de trazo en 0. 
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4. Vuelva al modo Plan y haga doble clic en la miniatura de la página maestra Pie de página para abrirla en el modo de diseño. Seleccione el 
widget de menú completo y cópielo. 


5. Vuelva a la página maestra Interior y pegue el widget de menú. Utilice la herramienta Selección para arrastrarlo hasta el lado derecho del 
encabezado marrón. 


6. Haga clic en el botón INICIO dos veces para seleccionar el elemento de menú. Aplique la siguiente configuración del panel de texto o del 
menú Texto del panel de control: 


Fuente web: Open Sans Condensed Bold 
Tamaño de fuente: 20 

Color: Marrón claro 

Alineación: Izquierda 

Tracking: O 

Interlineado: 24 px 

Espacio después: 24 

Etiqueta de nivel de párrafo: Subtítulo (h2) 


Observe que todos los elementos de menú se actualizan para tener el mismo formato. 


7. En el panel Estilos de párrafo, cree un nuevo estilo de párrafo y llámelo: subtítulo. 


8. En el panel Estados, seleccione el estado de rollover. Establezca el color del texto en marrón para los estados de rollover, de ratón pulsado 
y activo (véase la Figura 35). 


Ratón pulsado 


Activo 


Figura 35. Establezca el resto de los estados de elementos de menú para utilizar el color de texto marrón. 


Solo queda un elemento para añadir al encabezado de la página maestra Interior. 
En este momento, se ha completado la navegación del sitio de nivel superior de la página maestra Interior. 


1. Elija Archivo > Colocar (o use Comando+D en Mac o Control+D en Windows) para abrir el cuadro de diálogo Importar. Busque y seleccione 
el archivo en la carpeta de archivos de ejemplo denominado logo-interior.png y haga clic en Aceptar. 

2. Haga clic una vez en el lado izquierdo del encabezado para colocar la imagen del logotipo en la página. Utilice la herramienta Selección 
para cambiar la posición del gráfico para centrarlo con el widget de menú, en el centro vertical del rectángulo marrón. 


3. Haga clic en Previsualización para ver la página maestra procesada en Muse (véase la Figura 36). 


= KATIE'S CAFE mu HOME MENU GALLERY BLOG CONTACT 


Figura 36. El encabezado completo se muestra en la página maestra Interior. 


4. Haga clic en Diseño para continuar editando las páginas maestras. 
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Ir al principio 


Creación del encabezado de la página maestra de aterrizaje 


A continuación, deberá rellenar la página maestra de aterrizaje, que define el encabezado de la página de inicio. El encabezado es muy similar, 
pero no incluye un rectángulo marrón. 


En este momento, se ha completado también la navegación del sitio de nivel superior de la página maestra Interior. 
1. En modo de diseño, copie el widget de menú en la página Interior. 


2. Abra la página maestra de aterrizaje en modo de diseño y seleccione Edición > Pegar en contexto. 


3. Con el menú seleccionado, mantenga pulsada la tecla Mayús mientras presiona la flecha hacia abajo cuatro veces, para bajar el menú 
aproximadamente 40 píxeles desde la parte superior de la página. 


4. Seleccione Archivo > Colocar, y busque y seleccione el archivo de la carpeta de archivos de ejemplo denominado logo-landing.png y haga 
clic en Aceptar. 


5. Haga clic una vez en el lado izquierdo del encabezado para colocar la imagen del logotipo transparente en la página. Utilice la herramienta 
Selección y las guías inteligentes para colocar el gráfico centrado con el widget de menú. 


Ir al principio 


Aplicación de páginas maestras a las páginas del diseño 


Si lo desea, puede hacer clic con el botón derecho en cada miniatura de página y seleccionar el nombre de la página maestra que desea aplicar 
a cada página. Sin embargo, suele ser más rápido simplemente arrastrar y colocar las páginas maestras: 


Haga clic y arrastre la miniatura de la página maestra Interior a todas las páginas restantes del mapa del sitio. Observe que los diseños de 
miniaturas se actualizan a medida que se aplica cada página maestra. 


1. Haga clic y arrastre la miniatura de la página maestra de aterrizaje a la miniatura de la página de INICIO para aplicarla. El texto azul que 
aparece bajo la miniatura de la página de INICIO se actualiza de [Sin página maestra] a [Página de aterrizaje]. 


Ir al principio 


Relleno de un rectángulo con una imagen de fondo 


1. En el modo Plan, haga doble clic en la miniatura de la página de INICIO para que se abra en el modo de diseño. 


Observe que no puede seleccionar los elementos de encabezado y pie de página en la página. Se encuentran en las páginas maestras (Página 
de aterrizaje y Pie de página ) y solo se pueden editar en esas páginas. 
2. Dibuje un rectángulo que abarque toda la anchura de la página, establezca la visualización en una anchura del 100%. 


3. Utilice el menú Relleno para hacer clic en el icono de carpeta junto a la sección Imágenes. En el cuadro de diálogo Importar que aparece, 
seleccione el archivo de la carpeta de archivos de ejemplo denominado img-salad-darker.png y haga clic en Abrir (véase la Figura 37). 


FAVONITOS Img-drinks. jog img-hero jpg 
L Dropbox 
$ Aplicacanes 
E Escritorio En 


[® Documentos 
img-haldimg- img-lunch jpg 


O Descargas cupjpg 
H videos 

JÌ Música 

A Fotos 


logo-irterior png 
COMPARTIDO 


Figura 37. Establezca la imagen de relleno de fondo del rectángulo. 
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4. Establezca el menú Encaje en Escalar para rellenar y haga clic en la posición superior derecha de la sección Posición para alinear la 
imagen por la esquina superior derecha en la página. 

5. Haga clic en cualquier otra parte de la página para cerrar el menú Relleno. 

6. Utilice la herramienta Selección para arrastrar los manejadores y cambiar el tamaño del rectángulo según sea necesario. Utilice las guías 
inteligentes para colocar el gráfico de forma que quede centrado y alinee el borde superior de la imagen con la parte superior de la ventana 
del navegador. 


Ir al principio 


Aplicación de formato y estilo a contenido de texto 


A continuación, añadirá algunos marcos de texto y configurará estilos de párrafo para controlar la apariencia del texto. 


Fuente web: Open Sans Condensed Bold 
Tamaño de fuente: 50 

Color de fuente: Marrón 

Alineación: Centrado 

Tracking: 1 

Interlineado: 48 px 

Etiqueta de nivel de párrafo: Subtítulo (h1) 


Fuente web: Gentium Book Basic Bold Italic 
Tamaño de fuente: 16 

Color de fuente: Marrón claro 

Alineación: Izquierda 

Tracking: 1 

Interlineado: 48 px 

Etiqueta de nivel de párrafo: Subtítulo (h3) 


1. Utilice la herramienta Texto para dibujar un marco de texto centrado debajo del rectángulo que ha creado en el área de encabezado. 


2. Escriba: WELCOME TO KATIE'S CAFÉ. Utilice el panel de texto o el menú Texto del panel de control para configurar los siguientes 
atributos: 


Cree un nuevo estilo de párrafo y llámelo: encabezado 
Cree un segundo marco de texto debajo del encabezado y escriba: A small family-owned chain of cafés in San Francisco. 


. Configure los siguientes atributos: 


o apg 


. Cree un nuevo estilo de párrafo y llámelo: Subtítulo serif 


Normalmente, el texto del subtítulo se alinea a la izquierda. Pero en este caso concreto en la página de inicio, lo alineará en el centro. 


7. Mientras que el texto está aún seleccionado, establezca la alineación en centrado. 


Observe que el panel Estilos de párrafo ahora muestra un signo más (+) junto al nombre del estilo de párrafo. Esto indica que se ha 
aplicado el estilo de párrafo al texto seleccionado actualmente, pero se ha cambiado al menos un atributo de estilo. 


8. Coloque el ratón sobre el nombre del estilo de párrafo y aparecerá una sugerencia que muestra la configuración del texto. Todos los 
atributos distintos de los atributos del estilo original se muestran debajo de la línea. En este caso, el elemento que aparece debajo de la 
línea indica: alineación: centro (véase la Figura 38). 
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3 
poza de párrafo 
3 
3 
O 


sangría izquierda: O ily-owned chai 


y fuente: Arial 
estilo de vínculo: [Estilo de vinculo predeterminado] 


alinear: centro 


Figura 38. Un signo más indica que el texto utiliza un formato diferente y la sugerencia especifica cuál es la diferencia entre el texto seleccionado 
y el estilo de párrafo. 


Ir al principio 


Diseño de un separador de página decorativo con elementos agrupados 


Debajo de los dos marcos de texto, añadirá un separador de página decorativo. 


No es necesario establecer una etiqueta de párrafo para este marco de texto decorativo. 


1. Para mostrar las guías, seleccione Ver > Mostrar guías. 


2. Utilice la herramienta Rectángulo para dibujar un rectángulo de 445 píxeles de anchura y 20 píxeles de altura. Colóquelo de forma que 
abarque la mitad izquierda de la página (alineado con el lado izquierdo de la cuadrícula de página de 9 columnas) que se extiende en el 
centro de la página. 


3. Establezca el color de relleno del rectángulo en ninguno. Establezca el color del trazo en marrón claro. En las opciones de trazo, desvincule 
los campos. Establezca la anchura de trazo en 2 y todos los demás en 0, del mismo modo que ha creado una línea para el diseño del pie 
de página. 

4. Presione Opción/Alt y utilice la herramienta Selección para arrastrar una copia del rectángulo horizontalmente, para alinearlo con el primer 
rectángulo y su extremo se alinea con el lado derecho de la cuadrícula de página. 

5. Utilice la herramienta Texto para crear un campo de texto pequeño entre los dos rectángulos, en el centro de la página. 


6. Fuera de Muse, abra el visor de caracteres para insertar un carácter especial. Busque el término: White Four Pointed Star (Estrella de 
cuatro puntas blanca) e insértelo en el elemento dos veces para crear dos estrellas. 


7. En el panel de texto, aplique la siguiente configuración: 


Fuente web: Gentium Book Basic 
Tamaño de fuente: 24 

Color: Marrón claro 

Alineación: Centro 

Tracking: 3 

Interlineado: 24 px 


8. Seleccione los dos rectángulos y el marco de texto y seleccione Objeto > Grupo. 


Ir al principio 


Creación de un elemento de biblioteca reutilizable 


1. Abra el panel Biblioteca seleccionando Ventana > Biblioteca. 
2. Haga clic en el icono de carpeta situado en la parte inferior derecha del panel Biblioteca para crear una nueva carpeta. 
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3. 
4. 


J Filtrar por nombre 


» [5 FontAwsome (icons) 


~ ES Page Designs 
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Haga clic en el campo de la nueva carpeta y llámela: Diseños de página. 


Seleccione el grupo que creó en la sección anterior. Haga clic en el botón Añadir elementos seleccionados (icono de paso de página) para 
añadir el grupo de elementos a la carpeta. Cambie el nombre del elemento de biblioteca: Separador de página (véase la Figura 39). 


ELCOME TO K 


A small family-owned chain of 


++ - 


|Page Separator t 


CIO 


Figura 39. Cree y asigne un nombre a un nuevo elemento dentro de la carpeta del panel Biblioteca. 


Observe que se muestra una previsualización del grupo en la biblioteca para ayudarle a identificar elementos. 


En las próximas secciones de este artículo, hará clic en la carpeta de diseños de página del panel Biblioteca para expandirla y arrastre una copia 
del separador de página a la página. 


Ir al principio 


Alineación de elementos de página mediante las guías de la cuadrícula de la página 


A continuación, dibujará tres rectángulos, utilizará las cuadrículas de columnas de la página para alinearlas y las rellenará con las imágenes de 
fondo. 


1, 
2, 
3. 


Utilice la herramienta Rectángulo para dibujar un rectángulo de aproximadamente 304 x 304 píxeles. 
Utilice la herramienta Selección para alinear el lado izquierdo del rectángulo con el lado izquierdo de la página. 


Mantenga pulsada Opción/Alt y arrastre una copia del rectángulo al centro de la página con un pequeño espacio entre ellos. Presione 
Opción/Alt y arrastre el rectángulo central y coloque la segunda copia para que quede alineado con el lado derecho de la página. 


. Vuelva a seleccionar el primer rectángulo de la izquierda. Utilice el menú Relleno para establecer la imagen de fondo para utilizar el archivo 


llamado img-coffee.jpg. Establezca el menú Encaje en Escalar para rellenar y a continuación, haga clic en el punto central de la sección 
Posición. Haga clic fuera para cerrar el menú Relleno. 


. Repita el paso 4 para establecer el relleno de fondo del rectángulo central y los rectángulos de la derecha con la misma configuración. A 


menos que establezca el relleno del rectángulo central para utilizar la imagen img-baking.jpg y el rectángulo derecho para utilizar la imagen 
img-dinner.jpg (véase la Figura 40). 
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WELCOME TO KATIE'S CAFÉ 


A small family-owned chain of cafés in San Francisco 


++ 


Figura 40. Alinee los tres rectángulos rellenos mediante las guías de página. 


Ir al principio 


Aplicación de estilo a diferentes líneas de texto dentro del mismo marco de texto 


Debajo de los tres rectángulos rellenos, creará tres marcos de texto con estilo. 


1. Dibuje un marco de texto que abarque las mismas tres columnas bajo el rectángulo alineado al lado izquierdo de la página. Escriba el texto 
siguiente, pulsando la tecla Retorno/Intro para crear saltos de línea entre la primera línea de texto y el resto: 


The finest coffee € tea 


We serve only premium roast coffees from around the world and offer fresh coffee for each customer. We also offer a selection of loose leaf 
teas, everything from exotic flavors to the classics. 


2. Utilice la herramienta Selección para seleccionar solo la primera frase. Haga clic con el botón derecho en el texto y seleccione Cambiar 
mayús./minús. > MAYÚSCULAS para resaltar el encabezado del marco de texto. 


3. Abra el panel Estilos de párrafo y aplique el estilo de subtítulo. 


4. Seleccione el texto restante en el marco de texto. Utilice el panel de texto para aplicar los siguientes ajustes: 


Fuente: Gentium Book Basic 

Tamaño de fuente: 16 

Color: Marrón 

Alineación: Izquierda 

Tracking: O 

Interlineado: 24 px 

Espacio después: 24 

Etiqueta de nivel de párrafo: Predeterminado (p) 


5. Volverá a utilizar este estilo con frecuencia, de modo que cree un nuevo estilo de párrafo denominado: cuerpo. 


6. Cree un segundo marco de texto que abarque las tres columnas de la cuadrícula de página central, por debajo del rectángulo central. 
Escriba lo siguiente: 


Delicious home baking 


Based on Katie's original award-winning recipes, we serve a full menu of baked goods. These items are made fresh each morning to ensure 
you are getting the best quality possible. 


7. Cambie el encabezado a mayúsculas. Aplique los estilos de párrafo de subtítulo y cuerpo. 


8. Cree un tercer marco de texto bajo el rectángulo de la derecha. Aplique estilo al texto del mismo modo que a los otros dos marcos de texto 
después de escribir: 


Fresh € healthy meals 


With an extensive breakfast, lunch, and dinner menu, we do more than your typical café. All our meals are made to order and contain only 
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the freshest ingredients. 


9. Utilice la herramienta Texto para crear un nuevo campo de texto debajo de los otros tres campos de texto que abarquen las 4 primeras 
columnas del lado izquierdo de la página. Escriba: 


Introducing our seasonal cupcake 


For a limited time, you can get one of our Maple Walnut Cupcakes. Based on the same ingredients that make all our cupcakes taste so 
good, plus the rich and decadent flavors of maple and walnut, you won't want to pass these up. 


Katie Ricks 


10. Establezca el encabezado en mayúsculas y aplique el estilo de párrafo: subtítulo. 
11. Seleccione las dos frases centrales y aplique el estilo de párrafo de cuerpo. 
12. Seleccione el nombre Katie Ricks. Utilice el panel de texto para aplicar la siguientes configuración: 


Fuente web: La Belle Aurore 
Tamaño de fuente: 42 
Color: Marrón 

Alineación: Derecha 
Tracking: O 

Interlineado: 24 px 

Espacio después: 6 


Este formato de fuente crea la ilusión de una firma. 


13. Utilice la herramienta Selección para seleccionar todo el marco de texto. En el menú Relleno, establezca el color de relleno en blanco y el 
regulador de opacidad en 77. 


Ir al principio 


Relleno del resto de la página de inicio 


Realice los siguientes pasos para añadir el contenido al final de la página de inicio. 


A continuación, volverá a utilizar algunos de los elementos que ha creado anteriormente, copiándolos. 


OUR STORY 


Katie's Café is a small family-owned chain of cafés in San Francisco, California, USA. The original Katie's location in Noe Valley opened it's doors 
in the summer 2006 after founder Katie Ricks decided to spread her love of delicious baked goods and quality coffee to the neighborhood she 
resided in. 


Katie's in Noe expanded its menu to include full meals in addition to baked goods in 2007. Soon afterward in spring 2008 Katie's opened a new 
location in Laurel Heights just north of the University of San Francisco. A third location in Cole Valley opened in winter 2011. 


Every item served at Katie's Café is created from Katie's own recipes, painstakingly crafted through years of baking for friends and family. 


Y por último, añadirá un conjunto más de marcos de texto y rectángulos con relleno en la parte inferior. 


AWARDS 
Katie's Café has won several awards in the annual San Francisco Times Best of SF competition, most notably Café of the Year in 2010. 


Katie's was also recently featured in an episode of No Fear: The Culinary Travels of Andrew Bourdin; Andrew pronounced her Abomination Unto 
the Lord Cake "a life-changing experience that has ruined me for all other cakes." 


A continuación, creará un rectángulo con relleno. 


1. Dibuje un rectángulo que abarque toda la página debajo de los tres marcos de texto y establezca la visualización en una anchura del 100%. 


2. Utilice el menú Relleno para rellenar el rectángulo con una imagen de fondo denominada img-cupcakes.jpg. Establezca el menú Encaje en 
Escalar para rellenar y haga clic en la posición superior izquierda de la sección Posición para alinear la imagen por la esquina superior 
izquierda en la página. 

3. Haga clic en cualquier otra parte de la página para cerrar el menú Relleno. 

4. Utilice la herramienta Selección para arrastrar los manejadores y cambiar el tamaño del rectángulo según sea necesario. Debe estar 
centrado, con una visualización del 100% y se debe alinear el borde superior del rectángulo a aproximadamente 1214 píxeles desde la 
parte superior de la página. 
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5. Haga clic con el botón derecho en el rectángulo y seleccione Organizar > Enviar detrás. El marco de texto con la firma que creó 
anteriormente debe aparecer ahora en la parte superior, y su fondo semitransparente permite que la imagen de la magdalena se muestre a 
través de él. 

1. Desplácese hacia arriba y seleccione el marco de texto de encabezado: WELCOME TO KATIE'S CAFÉ. 


2. Presione Opción/Alt y arrástrelo debajo del rectángulo relleno con magdalenas. Utilice la herramienta Texto para escribir sobre el 
encabezado y reemplazar el texto con: ABOUT KATIE'S CAFÉ. 


3. Abra el panel Biblioteca. Expanda la carpeta de diseños de página y arrastre una copia del separador de página a la página que aparece 
debajo del marco de texto. Centre ambos elementos en la página. 


4. Dibuje un rectángulo de aproximadamente 450 píxeles de anchura por 300 píxeles de alto. Rellene el rectángulo con la imagen de fondo 
denominada img-cookie.jpg. Establezca el fondo en Escalar para rellenar y haga clic en la posición central. 


5. Alinee el rectángulo con el lado izquierdo de la página. 


6. Dibuje un marco de texto a la derecha del rectángulo de galletas, de 450 píxeles de anchura aproximadamente. Escriba o pegue el texto 
siguiente: 


1. Aplique el estilo del subtítulo al encabezado y el estilo del cuerpo al resto del cuadro de texto. 
2. Alinee el borde derecho del marco de texto con el lado derecho de las guías de página. 


Pb 


. Desplácese hacia abajo y dibuje un marco de texto debajo del rectángulo de galletas, de 450 píxeles de anchura aproximadamente. Escriba 
O pegue el texto siguiente: 


. Aplique el estilo del subtítulo al encabezado y el estilo del cuerpo al resto del cuadro de texto. 
. Alinee el borde izquierdo del marco de texto con el lado izquierdo de las guías de página. 


. Dibuje un rectángulo de 450 píxeles de anchura aproximadamente. 


N e N e 


. Establezca el trazo y el color de relleno del rectángulo en ninguno. Establezca el relleno de fondo para que se utilice la imagen img- 
breakfast.jpg, con Relleno establecido en Escalar para rellenar y la posición definida en superior izquierda. 


3. Alinee el rectángulo con la parte derecha de las guías de página, debajo del marco de texto Nuestra historia. 


4. Abra el panel Biblioteca y expanda la carpeta FontAwesome. Arrastre el elemento de iconos de dirección hasta la parte inferior derecha de 
la página, justo encima de la guía de pie de página y alineado con el lado derecho de la página. 


5. Haga clic en el botón de flecha azul para abrir el menú Opciones. Seleccione la opción de círculo con flecha hacia arriba del menú. 
Establezca el color del texto en marrón (véase la Figura 41). 


Biblioteca 
o 


®© Filtrar por nombre 


Opciones de Font Awesome Directional Icons 


Website (view all icons) kon Circle Arrow Up y 
9 »h +i mus 


Figura 41. Configure el icono de fuente Awesome y aplique el estilo que coincida con el diseño del sitio. 


6. Con el icono de flecha hacia abajo seleccionado, utilice el menú de Hipervínculos para seleccionar el enlace de anclaje denominado 
superior (véase la Figura 42). 
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Plan Diseño Previsualizar 


: | top [Ordenador] v 


Ordenador 


KA top 


R 
top 


CONTACT 
$ top 


Figura 42. Establezca el vínculo para que apunte al anclaje denominado superior que creó en la página maestra. 


7. Seleccione Archivo > Vista previa de página en navegador. Desplácese por la página para ver el contenido de la misma. Haga clic en el 
icono de flecha hacia arriba para volver a la parte superior de la página. 


8. Haga clic en Diseño para continuar editando la página de inicio. Si lo desea, seleccione Ver > Ocultar guías para ocultar las guías de la 
página. 


En la siguiente sección de este tutorial, el Capítulo 4, aprenderá a aplicar efectos de desplazamiento para controlar el movimiento y crear un 
efecto interactivo en la página de inicio. También aprenderá a crear un widget de menú manual para crear navegación secundaria en la página de 
menú. Y, a continuación, aplicará anclajes a la página y vinculará los elementos de menú a los anclajes, antes de añadir un segundo menú 
“oculto” que aparece cuando el visitante se desplaza por la página. 


Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook. 


Avisos legales | Política de privacidad en línea 
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Capítulo 4 


Aplicación de efectos de desplazamiento a rectángulos con imágenes de fondo 

Creación de la página de menú 

Configuración de un widget de menú manual 

Trabajo con regiones de etiquetas de anclaje y estados activos 

Adición de enlaces de anclaje a los elementos de menú 

Adición de las cinco secciones a la página del menú 

Colocación del contenido del texto para completar el contenido del menú para cada sección 
Adición de efectos de desplazamiento a los encabezados de sección en la página Menú 
Adición de un menú "anclado" en el encabezado mediante los efectos de desplazamiento 


En el capítulo 3 del tutorial sobre creación del primer sitio web con Muse, se agrega y edita una página maestra para agregar elementos de 
navegación del sitio mediante un widget de menú horizontal. Ha aprendido a aplicar estilo a los elementos de menú y a las etiquetas utilizando el 
panel Estados. También se aprende a trabajar con elementos de la biblioteca y a crear elementos reutilizables que puede arrastrar y soltar en las 
páginas. 


Ir al principio 


Aplicación de efectos de desplazamiento a rectángulos con imágenes de fondo 


Existen diversos tipos de efectos de desplazamiento que se pueden aplicar en Muse, incluidos los efectos de movimiento, opacidad, proyección 
de diapositivas y desplazamiento de Edge Animate. Puede aplicar efectos de desplazamiento mediante el panel Efectos de desplazamiento y 
también controlar el movimiento mediante la ficha Desplazamiento del menú Relleno. 


1. Desplácese hacia arriba y seleccione el rectángulo grande alineado con la parte superior de la página. 


2. Seleccione Ventana > Efectos de desplazamiento. En el panel Efectos de desplazamiento, especifique los ajustes siguientes (véase la 
Figura 43). 


Active la casilla de verificación Movimiento 

Deje los dos campos de la sección Movimiento inicial con el valor O 
Establezca el valor © px como posición clave (el campo central) 

Active la dirección en la sección Movimiento final y establezca el valor 0.5 
Deje la dirección horizontal con el valor O 


Efectos de desplazamiento 


[V] Movimiento 
Movimiento inicial: 
do | 
eo | 
vijor | 
Movimiento final: 
Eos | 
o | 


Figura 43. Aplique la configuración de movimiento del efecto de desplazamiento al rectángulo en el encabezado de la página. 


Esta configuración indica que una vez que la página se ha desplazado más allá de la posición clave (0 píxeles, el extremo superior de la página), 
el rectángulo debe desplazarse hacia arriba a una velocidad 0,5 veces superior al resto de los desplazamientos de página. 
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Active la casilla de verificación Movimiento 

Active la dirección hacia arriba en la sección Movimiento inicial y configúrelo en 0,5 

Deje la dirección horizontal con el valor 0 

Establezca el valor 1114 px como posición clave (el campo central) 

Active la dirección hacia arriba en la sección Movimiento final y establezca el valor en 0,5 
Deje la dirección horizontal con el valor 0 


3. Seleccione Archivo > Vista previa de página en navegador. Desplácese hacia abajo en la página y observe que el rectángulo superior en el 
encabezado se mueve a la mitad de velocidad que el resto de elementos de la página. 


4. Vuelva a Muse y desplácese hacia abajo para seleccionar el rectángulo grande que incluye la imagen de magdalenas. 


5. Abra el panel Efectos de desplazamiento (Ventana > Efectos de desplazamiento), e introduzca lo siguiente (véase la Figura 44). 


Efectos de desplazamiento 


[V] Movimiento 


Movimiento inicial: 


T [H 1114px 


nitro final 
: 


Figura 44. Aplique efectos de desplazamiento para controlar el movimiento del rectángulo a medida que se desplaza por la página. 


6. Vuelva a seleccionar Archivo > Vista previa de página en navegador. Desplácese hacia abajo en la página y observe que los dos 
rectángulos con una anchura del 100% se mueven a la mitad de velocidad que el resto de elementos de la página. 


7. Vuelva a Muse. Haga clic en la X para cerrar la ficha de la página Inicio en el modo de diseño. 


Ir al principio 


Creación de la página de menú 


La página de menú incluye una serie de elementos para el desayuno, almuerzo, cena y postres, así como bebidas. Para navegar por la página, 
los visitantes utilizan una barra de menús con enlaces de anclaje para acceder a cada sección. 
1. Abra la página Menú en el modo de diseño. Se muestran las guías para ayudarle a diseñar la página. 
. Utilice la herramienta Texto para dibujar un marco de texto que aparezca centrado debajo del área de encabezado. 
. Escriba las palabras: FRESH LOCAL INGREDIENTS & INNOVATIVE RECIPES 


. Aplique el estilo de párrafo: encabezado. 


a A w N 


. Utilice la herramienta Selección para cambiar el tamaño del marco de texto, de modo que ocupe toda la página. En el sitio de ejemplo, el 
texto se ajusta después del signo & a una segunda línea. 


6. Arrastre una copia del separador de página del panel Biblioteca y céntrela debajo del texto. 


Ir al principio 


Configuración de un widget de menú manual 


Al diseñar la página maestra de pie de página, se añade un widget de menú que se vincula a todas las páginas del sitio. A continuación, añadirá 
el widget de menú manual que se vincula a distintas secciones de la misma página. 
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Tipo de menú: Manual 

Dirección: Horizontal 

Editar conjuntamente: Activado 

Tamaño de elemento: Espaciado uniforme 
Mostrar icono a la izquierda: Desactivado 
Mostrar etiqueta: Activado 

Mostrar icono a la derecha: Solo submenús 
Posición de las partes: Horizontal, Centrado 


1. En la Biblioteca de widgets, expanda la sección de menús y arrastre un widget de menú horizontal a la página. 


2. Utilice la herramienta Selección para cambiar el tamaño de anchura de todo el menú, de manera que abarque a las 5 columnas centrales de 
las guías de la cuadrícula. 


3. Haga clic en el botón de flecha azul para abrir el panel Opciones. Aplique la siguiente configuración (véase la Figura 45): 


Tipo de menú: Páginas de nivel su... 


Dirección: Horizontal 
vV Editar conjuntamente 


Tamaño de elemento: Tamaño uniforme 


Partes 


Mostrar icono a la izquierda 
Y Mostrar etiqueta 


Mostrar icono a la derecha: Solo submenús 


Posición de las partes Horizontal; centrado 


Figura 45. Establezca el Tipo de menú en Manual en el panel Opciones. 


4. Haga clic en otra parte para cerrar el panel Opciones y observe las actualizaciones del menú a un solo elemento de menú con la etiqueta: 
[Nombre] 


5. Haga clic dos veces en el elemento de menú, una vez para seleccionar todo el widget de menú, y de nuevo para seleccionar el elemento de 
menú. Utilice la herramienta Texto para seleccionar la etiqueta del marcador de posición y escriba: BREAKFAST. 


6. Cambie a la herramienta Selección y pase el ratón sobre el elemento de menú. Haga clic en el signo más (+) que aparece a la derecha del 
elemento de menú BREAKFAST para crear un nuevo elemento de menú. Utilice la herramienta Texto para cambiar el nombre del nuevo 
botón: LUNCH. 

7. Repita el paso 6 para añadir tres elementos de menú más y para cambiarles el nombre: DINNER, DESSERT y DRINKS. 

8. Mientras se selecciona uno de los elementos de menú, abra el panel Estados. Seleccione el estado Normal y establezca el color de relleno 
del elemento de menú en Ninguno. A continuación, haga clic en cada uno de los estados restantes (Rollover, Ratón pulsado y Activo) y 
establezca su color de relleno en Ninguno. 


9. Seleccione el estado Normal y establezca el color de trazo en marrón claro. En las opciones de Trazo, desvincule los cuatro campos y 
establezca el valor O en todos ellos, excepto el trazo de lado derecho que debe establecerse en 2. Esto crea separadores entre cada 
elemento de menú. 


10. En el panel Opciones, deseleccione la opción: Editar conjuntamente. Seleccione el elemento de menú de BEVERAGE y el estado Normal y, 
a continuación, establezca el color de trazo en Ninguno. Repita este paso para el estado Activo. A continuación, vuelva a activar la opción 
Editar conjuntamente. 


11. Seleccione el estado Normal otra vez. Aplique el estilo de párrafo de subtítulo. Utilice el panel Texto para realizar los siguientes cambios al 
formato de texto: 


Fuente: Open Sans 
Tamaño: 16 


Alineación: Centrada 
Espacio después: 0 


El estilo del subtitular ahora muestra un signo más (+) junto al mismo, lo que indica que ha cambiado. Si lo desea, puede crear un nuevo 
estilo de párrafo, pero es conveniente dejarlo como está. 


12. Los estados Rollover y Ratón pulsado se actualizan automáticamente. Repita el paso 9 para aplicar el mismo formato al estado Activo. 
13. Utilice la herramienta Selección para alinear el menú, de modo que quede centrado verticalmente y a aproximadamente 52 píxeles por 
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debajo del separador de la página. 


En este momento, el menú no tiene ningún vínculo. Los widgets de menú manuales deben configurarse para utilizar los vínculos que desee, ya 
que no heredan los vínculos de la página del modo Plan. 


Ir al principio 


Trabajo con regiones de etiquetas de anclaje y estados activos 


La página Menú contendrá un total de cinco secciones diferentes con elementos de alimentación y bebida, separados por rectángulos grandes 
con una anchura del 100%. Por consiguiente, no se puede mostrar todo el contenido de la página sin desplazarse hacia abajo. Este es un 
aspecto importante a la hora de trabajar con las etiquetas de anclaje y los efectos de desplazamiento. Es posible que parezca que ambas 
funciones del sitio no funcionan si la página no es lo suficientemente larga como para que el visitante pueda desplazarse hacia abajo. 


Imagine que añadir etiquetas de anclaje es como fijar un marcador en algún lugar de la página. Cuando los visitantes hacen clic en un enlace a 
ese anclaje, el enlace se desplazará hacia abajo hasta donde se encuentra el marcador. 


Comenzará creando cinco anclajes denominados: breakfast, lunch, dinner, dessert y drinks, que se corresponden con cada una de las cinco 
regiones de la página. Siga estos pasos: 


1. Haga clic en el botón Anclaje en el panel Control para cargar la herramienta Anclaje (véase la Figura 46). 


Página Objeto Ver Ventana Ayuda" 
Plan 


Je 3Elo_] ffectos: E3[100 |7 Sy, Relleno del: CE 


Haga clic para cargar un anclaje de vinculo en el cursor de colocación (A) 


Figura 46. Cargue el cursor de colocación para el primer anclaje haciendo clic en el botón Anclaje. 


2. Haga clic una vez cerca de la parte superior izquierda de la página, justo debajo del separador de la página, para colocar el anclaje. 


3. En el cuadro de diálogo Cambiar el nombre de un anclaje que aparece, introduzca el nombre del anclaje: breakfast. Utilice la herramienta 
Selección para moverlo a aproximadamente 303 píxeles desde la parte superior de la página (véase la Figura 47). 


$ breakfast 


Cambiar el nombre de un anclaje 


| LUNCH | 


Nombre: 


Figura 47. Asigne un nombre al anclaje para el menú Breakfast cerca de la parte superior de la página. 


4. Repita estos pasos. Esta vez, haga clic en el botón Anclaje cuatro veces y, a continuación, haga clic en la página para colocar los anclajes 
con nombre en las siguientes posiciones hacia abajo en la página: 


lunch: 1255 px 

dinner: 1731 px 
dessert: 2798 px 
drinks: 3200 px 
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Si lo desea, puede utilizar el panel Transformar para seleccionar cada anclaje y establecer el valor en Y. 


Nota: La cantidad de espacio entre el primer anclaje y la primera instancia del contenido vinculado (el widget de menú manual) define el “área 
activa” que hace que el estado activo cambie en cada región. Por ejemplo, si el primer anclaje se coloca 100 píxeles por encima del menú, el 
estado activo de los elementos de menú para cada actualización de menú 100 píxeles antes del menú aparece cuando el visitante se desplaza 
hacia abajo en la página. 


A continuación, vinculará los elementos de menú a las etiquetas de anclaje para crear la navegación, de modo que los visitantes puedan saltar 
hacia abajo en la página para leer cada menú. 


Ir al principio 


Adición de enlaces de anclaje a los elementos de menú 


1. Haga clic en el elemento de menú BREAKFAST dos veces para seleccionarlo. El indicador de selección muestra las palabras "Elemento de 
menú". 


2. Utilice el menú Hipervínculos para seleccionar la etiqueta de anclaje de Breakfast en la página Menú (véase la Figura 48). 


Vínculos usados recientemente 
Ordenador 

L top 
GALLERY 

L top 


o GALLERY:Gallery-fullscreen 
Œ- BREAKFAST ¡LUN 


E 


L top 
MENU 
-È breakfast h 
L dessert 
L dinner 
L drinks 
È lunch 


L top 


Figura 48. Defina el vínculo para el botón BREAKFAST a la etiqueta de anclaje de Breakfast. 


3. Repita el paso 2 para añadir los anclajes a los cuatro elementos de menú restantes. 


4. Seleccione Archivo > Vista previa de página en navegador para comprobar el menú y ver cómo salta a cada sección de la página. Vuelva a 
desplazarse hacia arriba para hacer clic en cada uno de los botones. 


Resulta algo tedioso seguir desplazándose hacia arriba manualmente, así que posteriormente añadirá los botones para volver a la parte de arriba 
y un menú oculto con efectos de desplazamiento que permitirá que un segundo widget de menú permanezca en el área de encabezado. 


5. Vuelva a Muse para continuar editando la página del menú. 


Ir al principio 


Adición de las cinco secciones a la página del menú 


Esta página utiliza un diseño similar al de la página Inicio, con rectángulos que tienen una anchura del 100% y que tienen efectos de 
desplazamiento y marcos de texto con estilo. 


Los títulos de la sección ya se han completado. Si lo desea, haga clic en Previsualizar para ver cómo puede hacer clic en los botones de flecha 
para volver a arriba y volver a la parte de arriba tras visitar cada sección. 


1. Arrastre un rectángulo para que abarque la anchura de toda la ventana del navegador, aproximadamente 52 píxeles por debajo del widget 
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de menú. 


Defina el color del relleno y de trazo en Ninguno. Defina la imagen de fondo del rectángulo para utilizar el archivo denominado img- 
breakfast. jpg. Establezca la imagen en Escalar para rellenar y fije su posición en el punto central izquierdo. 

Cambie el tamaño del rectángulo arrastrando sus controles hasta que los bordes se alineen en ambos lados, lo que indica que se mostrará 
con una anchura del 100%. Defina la altura del rectángulo en 267 píxeles. 


4. Cree un marco de texto y escriba: BREAKFAST. 


En el panel Biblioteca, expanda la carpeta de iconos de FontAwesome y arrastre un icono direccional a la página. Utilice el panel Opciones 
para seleccionar el icono de flecha de círculo hacia arriba. Defina el color del texto para que sea marrón claro. 

Corte el icono de flecha de círculo hacia arriba y, a continuación, utilice la herramienta Texto para hacer clic inmediatamente delante de la B 
en el marco de texto: BREAKFAST. Pegue el icono de flecha de círculo hacia arriba dentro del marco de texto BREAKFAST. 


7. Defina el vínculo para el icono de flecha de círculo hacia arriba en el enlace de anclaje superior de la página Menú. 


8. Seleccione el texto BREAKFAST y aplique el estilo de título. A continuación, edite los atributos de fuente estableciendo el color de fuente en 


10. 


TL, 


12. 


13. 


14. 


del blanco y alineación a la izquierda. 


Coloque el marco de texto BREAKFAST a 600 píxeles desde la parte superior (Y) y a 4 píxeles desde la parte izquierda de la página (X). 
Puede utilizar el panel Transformar o las sugerencias para ayudarle a colocarlo. 


Seleccione el marco de texto BREAKFAST, pulse y mantenga pulsada la tecla Mayús y, a continuación, seleccione el rectángulo que 
incluye la imagen de desayuno. Suelte la tecla Mayús y, a continuación, pulse y mantenga pulsada la tecla Opción/Alt para arrastrar una 
copia duplicada de los dos elementos en la parte inferior de la página, manteniendo el nuevo conjunto alineado en el centro. Esta copia se 
convertirá en la sección Lunch. 


Posicione el conjunto de Lunch a 1205 píxeles desde la parte superior de la página. Utilice la herramienta Texto para seleccionar la palabra 
BREAKFAST y el tipo LUNCH. En el menú Relleno, defina la imagen de fondo para utilizar el archivo img-lunch.jpg. Mantenga la 
configuración de Cambiar escala hasta rellenar y defina la posición para centrar a la derecha. 


Repita los pasos 10 y 11 para duplicar la sección Lunch. Posicione el conjunto de Dinner a 1977 píxeles desde la parte superior de la 
página. Cambie el nombre del marco de texto DINNER. Defina la imagen de fondo para utilizar img-dinner.jpg. Utilice los mismos ajustes de 
Encaje y Posición. 


Repita los pasos 10 y 11 para crear la sección Dessert. Establezca el relleno del rectángulo de Dessert para utilizar la imagen de fondo de 
img-dessert.jpg, con su posición definida en la parte central izquierda. Actualice el marco de texto para indicar DESSERT, y coloque el 
borde superior del rectángulo de Dessert en un valor Y de 2748. 


Duplique el conjunto de Dessert para crear la sección Drinks. Escriba en el marco de texto para cambiar su nombre por el de DRINKS. 
Defina la imagen de fondo del rectángulo en img-drinks.jpg, utilizando la posición superior izquierda. Defina el borde superior del rectángulo 
de Drinks en un valor Y de 3446. 


Ir al principio 


Colocación del contenido del texto para completar el contenido del menú para cada sección 


A continuación, añadirá dos marcos de texto en los espacios entre las secciones para mostrar las selecciones de comida correspondientes para 
cada categoría. 


The Spike $9 


Breakfast burrito with egg, black beans, guacamole, onion, cilantro, chipotle tomato salsa, and your 
choice of potato, chicken, or beef 


The Dazzler $7 

Hash browns with scrambled eggs and locally sourced bacon 

The Nessie $8 

Two hearty buttermilk pancakes with your choice of chocolate chips or blueberries 


Seleccione Archivo > Colocar y examine para seleccionar el archivo de texto denominado breakfast1.txt que está ubicado en la subcarpeta 
del menú de la carpeta Activos. Haga clic en Abrir para cerrar el cuadro de diálogo Importar. 


Haga clic una vez en la página debajo del encabezado de Breakfast para colocar el archivo de texto con el siguiente contenido: 


Seleccione cada uno de los nombres de elementos (con precios) y aplique el estilo de párrafo serif de subtitular. A continuación, seleccione 
las descripciones de elementos debajo de cada uno y aplique el estilo de párrafo de cuerpo. 

Alinee el lado izquierdo del marco de texto con el lado izquierdo de la página. Cambie el tamaño del marco de texto para centrarlo 
verticalmente entre los encabezados de Breakfast y Lunch. Expanda la anchura del marco de texto para que abarque las primeras cuatro 
columnas. 
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5. Repita los pasos 1 a 4 para colocar el archivo de texto denominado breakfast2.txt. Aplique el estilo al texto y coloque el marco de texto para 
alinearlo en el lado derecho de la página, abarcando las últimas cuatro columnas. 

6. Siga este proceso para rellenar cada una de las secciones del menú, colocando el contenido de lunch1.txt y lunch2.txt y aplicando el estilo a 
los dos marcos de texto y, a continuación, repitiendo estos pasos para añadir dos marcos de texto con las opciones de comida a las 
secciones de dinner, dessert y drinks . 


7. Guarde el sitio y previsualice la página. Parece completa, pero se añadirán los toques finales al aplicar efectos de desplazamiento en la 
siguiente sección. 


Ir al principio 


Adición de efectos de desplazamiento a los encabezados de sección en la página Menú 


Esta parte es muy similar a los efectos de desplazamiento que se agregaron en la página Inicio. Recuerde que al añadir imágenes de fondo para 
los rectángulos con una anchura del 100%, se varía la alineación al seleccionar un posicionamiento distinto en el menú Relleno. Tenga en cuenta 
también que cada rectángulo tiene una altura de tan solo 267 píxeles, pero las imágenes de origen de fondo tienen una altura de más de 1300 
píxeles y se establecen en Escalar para rellenar. Esta configuración afectará al modo en el que se muestran los efectos de desplazamiento 
cuando se visualizan en un navegador. 


1. Seleccione el rectángulo en la sección Breakfast. Abra el panel Efectos de desplazamiento (Ventana > Efectos de desplazamiento), 
seleccione la casilla de verificación Movimiento e introduzca los siguientes atributos para controlar el movimiento del contenido de relleno 
(véase la Figura 49). 


En la sección Movimiento inicial, configure la dirección ascendente al desplazamiento a una velocidad de 
0,5x 

Defina el valor de la dirección horizontal en 0x. 

Establezca la posición clave en 440 px (también puede arrastrar el control con forma de T en la página 
para configurarlo) 

En la sección Movimiento final, defina la dirección ascendente para el desplazamiento a una velocidad de 
0,5x 

Defina el valor de la dirección horizontal en 0x. 


Efectos de desplazamiento 


[V] Movimiento 
Movimiento inicial: 
os | 
[« o] 

mEpo | 

l Movimiento final: 


SM 


Figura 49. Active la casilla de verificación de Movimiento y aplique los ajustes de efectos de desplazamiento. 


2. Seleccione el rectángulo de Lunch. En el panel Efectos de desplazamiento, establezca la posición clave en 1205 px. Configure las 
direcciones ascendentes para las secciones de Movimiento inicial y Movimiento final en 0,5x. Configure las direcciones horizontales en Ox. 


3. Repita el paso 2 para aplicar efectos de desplazamiento al rectángulo de Dinner. Utilice los mismos ajustes, pero defina su posición clave 
en 1977 px. 


4. Siga repitiendo esta operación dos veces más. Establezca el rectángulo de Dessert para utilizar una posición clave de 2748 px. Establezca 
el rectángulo de Drinks para utilizar una posición clave de 3446. 


5. Seleccione Archivo > Vista previa de página en navegador para ver el efecto de desplazamiento en la acción. Haga clic en el elemento del 
menú Dessert y observe los encabezados del rectángulo a medida que la página salta a la sección Dessert. Haga clic en el icono de flecha 
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hacia arriba para volver a la parte superior. 


Cuando haya terminado la prueba, cierre el navegador y regrese a Adobe Muse. 


Ir al principio 


Adición de un menú "anclado" en el encabezado mediante los efectos de desplazamiento 


La página del menú está casi completa, pero aún sigue siendo un poco difícil navegar por ella. Sería más sencillo si hubiese un widget de menú 
que apareciera encima de cada sección de la página, de modo que se pudiese acceder fácilmente a cada sección sin tener que retroceder por 
completo a la parte inicial. Esta es una técnica que se puede utilizar para que aparezca el widget de menú para desplazarse hacia arriba y, a 
continuación, se "ancle" en la parte superior de la página. 


Posición de transición 1: 5 px al 0% 
Posición clave: 252 px al 0% 
Posición de transición 2: 252 px al 100% 

1. Seleccione el widget de menú en la parte superior de la página. 


2. Mantenga pulsada la tecla Opción/Alt mientras arrastra una copia duplicada ascendente hacia el encabezado. A medida que la arrastra, 
asegúrese de mantener el duplicado alineado verticalmente con el original y con el centro de la página, utilizando las guías inteligentes que 
aparecen. 


3. Coloque el encabezado duplicado inmediatamente debajo del rectángulo del encabezado marrón, con una posición Y de 92 píxeles. 


4. Abra el panel Efectos de desplazamiento. Haga clic en la ficha Opacidad (segundo por la izquierda) para ver los valores de opacidad para 
los efectos de desplazamiento. 


5. Active la casilla de verificación Opacidad y aplique los siguientes ajustes (véase la Figura 50). 


Figura 50. Defina la configuración para controlar la transparencia del widget de menú. 


Nota: También puede establecer los valores de Posición de transición 1, Posición clave y Posición de transición 2 arrastrando las partes 
correspondientes del control con forma de T que aparece encima del menú, una vez que se activan los efectos de desplazamiento. 


La configuración anterior indica que el menú permanecerá completamente transparente (0% opaco) hasta que el visitante se desplace hacia abajo 
en la página a 252 píxeles desde la parte superior. Cuando esto sucede, también ocurre que el primer widget de menú (visible) se desplaza 
exactamente a la misma ubicación. 


Para suavizar la transición cuando aparece el menú duplicado y el menú original se desplaza hacia arriba y se aleja, se añade un rectángulo 
sólido que tiene el mismo color de relleno que el fondo de la página. De esta forma, el rectángulo (que se dibuja encima del menú duplicado) 
también puede utilizar efectos de desplazamiento para impedir que el menú aparezca con un exceso de negrita (ya que los menús se muestran 
uno encima del otro). 


6. Dibuje un rectángulo justo debajo del encabezado marrón. Utilice el panel Transformar para aplicar los siguientes valores (véase la Figura 
51): 


Altura: 45 píxeles 
Anchura: 1160 píxeles 
X: -100 píxeles 

Y: 87 píxeles 


40 


Configurado para mostrarse con una anchura del 100% 


Figura 51. Defina el rectángulo que abarca el menú duplicado para mostrar una anchura del 100%. 


1. En la ficha Opacidad del panel Efectos de desplazamiento, introduzca los siguientes valores: 


Posición de transición 1: 5 px al 0% 
Posición clave: 252 px al 0% 
Posición de transición: 252 px al 100% 


La configuración anterior garantiza que el rectángulo encima del menú duplicado lo oculta justo hasta que el menú original se desplaza 
encima, creando una transición perfecta. 


2. Seleccione Archivo > Vista previa de página en navegador para desplazar la página hacia abajo. Desplácese lentamente y observe al 
primer menú desplazarse hacia arriba, y el menú (transparente) duplicado aparece justo cuando el menú original se desplaza fuera de la 
vista. Los efectos de desplazamiento también controlan el movimiento del menú duplicado, que hacen que permanezca en su sitio mientras 
continúa desplazándose hacia abajo en la página. 


En el siguiente capítulo del tutorial sobre creación del primer sitio web con Adobe Muse, conocerá cómo cambiar el tamaño y recortar los archivos 
de imagen colocados, así como a alinearlos en las columnas de la cuadrícula. También añadirá un widget de proyección de diapositivas a pantalla 
completa y lo configurará para mostrar una galería de imágenes. A continuación, aprenderá a incorporar contenido del sitio de terceros 
incorporando HTML en la página del blog. 


Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook. 


Avisos legales | Política de privacidad en línea 
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Capítulo 5 


Formato de texto en la parte superior de la página Galería 

Colocación de varias imágenes redimensionadas mediante el cursor de colocación 
Recorte de imágenes colocadas 

Aplicación de vínculos a marcos de texto y definición del estilo de vínculo predeterminado 
Adición y configuración de un widget de proyección de diapositivas a pantalla completa 
Formato de texto en la parte superior de la página Blog 

Uso de HTML incrustado para mostrar un blog en un sitio de Muse 


En el Capítulo 4 del tutorial de creación del primer sitio web con Muse, ha añadido efectos de desplazamiento para crear efectos de movimiento 
interactivos en la página Inicio. También ha construido la página Menú y ha creado un menú manual que se ha vinculado a distintos anclajes de la 
página. En el Capítulo 5, verá cómo editar imágenes colocadas cambiando su tamaño y recortándolas dentro del espacio de trabajo de Muse. 
También aprenderá a trabajar con HTML incrustado para añadir un blog de Tumblr en la página Blog. 


Ir al principio 


Formato de texto en la parte superior de la página Galería 


La página Galería incluye una serie de imágenes que están alineadas mediante las guías de página. 
1. Abra la página Galería en modo de diseño. 
2. Si las guías no están aún visibles, seleccione Ver > Mostrar guías. 
3. Cree un marco de texto y escriba: GALLERY. Aplique el estilo de párrafo de encabezado. 
4. Cree un segundo marco de texto que esté alineado a la izquierda de la página. Escriba: 


Ever since Katie's Café first opened its doors in 2006 we have been dedicated to sourcing fresh local 
ingredients and providing the quality finished product to our customers. Founder, Katie Ricks, 


y, a continuación, aplique el estilo de párrafo del cuerpo. 


5. Cree un tercer marco de texto que esté alineado a la derecha de la página. Escriba: 


is passionate about food and customer service. This passion is what inspires every menu item and we are 
proud of the classics, as well as the new items that we serve. 


De nuevo, aplique el estilo de párrafo del cuerpo. 


6. Utilice la herramienta Selección para seleccionar tanto el párrafo izquierdo como el derecho y seleccione Objeto > Grupo. 
7. Arrastre una copia del separador de página del panel Biblioteca. 


8. Utilice la herramienta Selección para centrar los tres elementos (texto de encabezado, grupo de dos columnas de texto y gráfico del 
separador de página) para alinearlos verticalmente en la página (véase Figura 52). 


ESI KATIE'S CAFE Es HOME MENU 


GALLERY 


Ever since Katie's Café first opened its doors in 2006 we have been is passionate about food and customer service, This passion is what 
dedicated to sourcing fresh loca) ingredients and providing the inspires every menu item and we are proud of the classics, as well as 


quality finished product to our customers, Founder, Katie Ricks, the new items that we serve. 


++ 


Figura 52. Coloque los marcos de texto y el separador de página para que se ajuste debajo del contenido del encabezado. 


42 


Ir al principio 


Colocación de varias imágenes redimensionadas mediante el cursor de colocación 


1. Seleccione Archivo > Colocar y examine para seleccionar los archivos en la carpeta Activos denominados gallery-1.jpg, gallery-2.jpg, 
gallery-3.jpg, y gallery-9.j¡pg. Haga clic en Abrir para seleccionarlos y cerrar el cuadro de diálogo Importar. 


Observe que el cursor de colocación muestra el número 4, lo que indica que hay 4 imágenes cargadas. 


2. Haga clic y arrastre el cursor a la izquierda de la página. Una sugerencia muestra temporalmente un porcentaje que le permite conocer la 
escala de la primera imagen que está colocando. Suelte el botón del ratón cuando la imagen se haya escalado aproximadamente a un 16%, 
de modo que las dimensiones de la imagen sean 330 píxeles de ancho por 220 píxeles de alto. 


3. Repita el paso 2 para colocar las otras tres imágenes en la misma escala. 


No se preocupe de la alineación todavía. En primer lugar, editará las imágenes que haya en Muse. 


Ir al principio 


Recorte de imágenes colocadas 


A continuación, recortará cada uno de los cuatro archivos de imagen, de manera que queden todos cuadrados (220 x 220 píxeles). 


1. Utilice la herramienta Recortar para seleccionar la imagen gallery -1.¡pg. 

2. Haga clic una vez en el centro para que aparezca un icono de círculo negro. El borde alrededor de la imagen se vuelve azul y aparece el 
cursor de mano abierto. Arrastre la imagen dentro del marco de imagen a la izquierda, hasta que se corte el lado izquierdo del vaso y 
aparezca en el área semi-opaca. 

3. Haga clic de nuevo en la imagen con la herramienta Recortar. El icono de círculo central desaparece y el borde alrededor del marco de la 
imagen cambia a naranja. Arrastre el manejador central derecho hacia el medio para cambiar la anchura de la imagen a 220 píxeles (véase 
Figura 53). Puede consultar el panel Transformar para comprobar las dimensiones. 


e00o Mu [mo ly]. f- 


Figura 53. Recorte los lados de la imagen colocada con la herramienta Recortar. 


4. Repita los pasos 1-2 para recortar las imágenes gallery-2.jpg, gallery-3.jpg, y gallery-9.jpg de forma que todas tengan una anchura de 220 
píxeles. 


5. Utilice la herramienta Selección para alinear las cuatro imágenes a lo largo de la anchura de la página (véase la Figura 54). 
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Figura 54. Alinee los cuatro marcos de la imagen recortada en las columnas creadas por las guías de página. 


El resto de la página Galería está compuesta de imágenes redimensionadas y marcos de texto. 


1; 


Coloque la imagen denominada gallery-4.jpg, haga clic y arrástrela para colocarla al 38%. Utilice la herramienta Recortar para recortar el 
borde izquierdo y, a continuación, reduzca la anchura del marco de la imagen, hasta que sus dimensiones sean 464 x 512 píxeles. Utilice la 
herramienta Selección para alinear el borde izquierdo con el lado izquierdo de la página. 


Coloque la imagen denominada gallery-5.jpg a la derecha de la imagen más grande que acaba de recortar. Haga clic y arrástrela 
aproximadamente un 24%. Utilice la misma técnica que antes, deslice la imagen hacia el interior del marco de la imagen para centrarla. 
Esta vez, arrastre el manejador inferior hacia arriba y el manejador derecho hacia el centro para recórtalo a 264 x 246 píxeles. Alinee el 
borde derecho con el lado derecho de las guías de página y alinee el borde inferior con la parte inferior de la imagen de gallery-4.jpg. 


Coloque gallery-6.jpg, haga clic y arrástrela hasta 50%. Esta imagen abarcará toda la página. Centre la imagen en el marco de la imagen y 
recórtela a 953 x 516 píxeles. Alinéela verticalmente en la página. 

Coloque gallery-7.jpg, haga clic y arrástrela al 23% en el lado izquierdo de la página. Recórtela a 464 x 342 píxeles y alinéela con el lado 
izquierdo de la página. 

Coloque gallery-8.jpg, haga clic y arrástrela al 23% en el lado derecho de la página. Recórtela a 464 x 310 píxeles y alinéela al lado 
derecho de la página. Utilice la herramienta Selección y las guías inteligentes para garantizar que todas las imágenes estén alineadas con 
las guías de página y entre sí (véase la Figura 55). 
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Figura 55. Ordene las imágenes recortadas de la galería en un patrón de mosaico en la página. 


A | | 


Hay un punto vacío en la imagen de las magdalenas (gallery-5.jpg). Solo se rellenará con un marco de texto. 


Ir al principio 


Aplicación de vínculos a marcos de texto y definición del estilo de vínculo predeterminado 


Añadirá un botón que permite que el visitante vea la proyección de diapositivas a pantalla completa. 
1. Dibuje un marco de texto sobre la imagen de las magdalenas. Cambie su tamaño a 464 x 242 píxeles y alinéela con el lado derecho de la 
página. Establezca el color de relleno del marco de texto en marrón claro. 
2. Escriba: VIEW GALLERY FULLSCREEN 


3. Aplique el estilo de párrafo de encabezado. A continuación, establezca el color en blanco y defina la alineación a la izquierda. El texto se 
ajustará a dos líneas. 


4. Con el marco de texto seleccionado, utilice el menú Hipervínculos para aplicar un vínculo a la página Galería: Pantalla completa (véase la 
Figura 56). 
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Vínculos usados recientemente 


Ordenador 
BLOG 


L top 
GALLERY 


VIEW GALLERY d top 
FULLSCREEN ~ GALLERY:Gallery-fullscreen h 


È top 
GALLERY-:Gallery-fuliscreen 
MENU A 
Ma 


Figura 56. Configure el marco de texto como un vínculo a la página que muestra la proyección de diapositivas de la galería. 


5. Haga clic en el texto de los hipervínculos a la izquierda del menú Hipervínculos para ver las opciones disponibles. En el cuadro de diálogo 
que aparece, observe que el texto está establecido para utilizar el estilo de vínculo predeterminado. 


6. Haga clic en el botón Editar estilos de vínculo para abrir la ficha Maquetación del cuadro de diálogo Propiedades del sitio. 
7. Utilice esta interfaz para especificar cómo se mostrarán los vínculos en el sitio. Para este proyecto de sitio, los estados del vínculo están 


establecidos para heredar cualquier estilo de negrita o cursiva aplicado al texto, pero ninguno de ellos aparecerá nunca subrayado. Los 
colores de texto se establecen para cada estado: 


Normal: Marrón claro 
Pasar por encima: Marrón 
Visitado: Marrón claro 
Activo: Marrón 


Nota: Utilice el menú Resolución para seleccionar entre la salida para Estándar y HiDPI (2x); para establecer la calidad de las imágenes 
exportadas o publicadas del sitio. La configuración de HiDPI requiere que las dimensiones de las imágenes de establezcan en el doble, pero que 
se muestren de forma óptima en pantallas de retina y otras en pantallas de alta definición. 


8. Haga clic en Aceptar para cerrar el cuadro de diálogo Propiedades del sitio. 
9. Guarde el sitio y cierre la página Galería en la vista Diseño. 


Ir al principio 


Adición y configuración de un widget de proyección de diapositivas a pantalla completa 


La página Galería: Pantalla completa contiene un widget de proyección de diapositivas a pantalla completa que se cargará cuando el visitante 
haga clic en el vínculo desde la página Galería principal. 


Observe que el widget se amplía inmediatamente para rellenar la anchura del 100% de la página. 


Nueva imagen principal: Llenar marco proporcionalmente 

Nueva miniatura: Llenar marco proporcionalmente 

Transición: Suavizar 

Velocidad de transición: 0,5 segundos 

Reproducción automática activada, establecer para comenzar la reproducción en 3 segundos 
Reanudar tras: Desactivada 

Reproducir una vez: Desactivada 

Aleatorio: Desactivada 

Activar Barrido: Desactivada 
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Maquetación 

Cuadro de iluminación: Desactivada 
Miniaturas de formularios libres: Desactivada 
Pantalla completa: Activada 


Partes 

Primera: Desactivada 
Siguiente: Activada 

Anterior: Activada 

Última: Desactivada 

Pies de ilustración: Activada 
Contador: Desactivada 

Botón Cerrar: Desactivada 
Miniaturas: Desactivada 


Edición 


Mostrar partes de la caja de iluminación al editar: Activada 
Editar conjuntamente: Activada 


1. Abra la página Galería: Pantalla completa en la vista Diseño. 


2. Seleccione Ver > Ocultar guías si lo desea. 


3. Abra la Biblioteca de widgets y expanda la sección Proyección de diapositivas. Arrastre una proyección de diapositivas a pantalla completa 


a la página. 


. Con la proyección de diapositivas seleccionada, coloque el borde superior a lo largo del borde inferior del encabezado, de manera que 
ninguno de los colores de relleno del fondo del navegador se muestren a través del mismo. En este diseño, la proyección de diapositivas no 
mostrará el botón Cerrar. Los visitantes harán clic en uno de vínculos del menú superior para ir a una página nueva y salir de la proyección 
de diapositivas. 


. Haga clic en el botón de flecha azul para abrir el panel Opciones y aplicar los ajustes siguientes (véase la Figura 58): 
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Opciones de proyección de diapositivas 
Añadir imágenes... M 


Nueva imagen principal: Llenar marco prop... 
Nueva miniatura: Llenar marco prop... 
Transición: Suavizar 


Velocidad de transición: 7. 0,5 segundos 


V Reproducción automática 4. 3 segundos 


Reanudar tras e segundos 


Reproducir una vez 


Aleatorio Y Activar Barrido 
Maquetación 


Caja de iluminación Y Pantalla completa 


Miniaturas con forma libre 


Partes 


Primera V Pies de ilustración 
V Anterior Contador 
V Siguiente Botón Cerrar 
Última Miniaturas 
Edición 
V Mostrar partes de la caja de iluminación al editar 


V Editar conjuntamente 


Figura 58. Actualice los ajustes para configurar la proyección de diapositivas en el panel Opciones. 


6. Haga clic en la carpeta Añadir imágenes... En el cuadro de diálogo Importar que aparece, seleccione los siguientes archivos: gallery-1.jpg, 
gallery-2.jpg, gallery-3.jpg, gallery-4.jpg, gallery-5.jpg, gallery-6.jpg, gallery-7.jpg y gallery-8.jpg. Haga clic en Abrir para importar los 8 
archivos de imagen y cerrar el cuadro de diálogo Importar. 

7. Haga clic en cualquier otra parte de la página para cerrar el panel Opciones. 


8. Haga clic en Previsualizar para ver la proyección de diapositivas en curso. Se muestran las 8 imágenes añadidas al hacer clic en los 
botones Siguiente o Anterior. Además, si espera durante 3 segundos, la función de reproducción automática comienza a reproducir la 
proyección de diapositivas y continúa para crear el bucle. Observe que la imagen de proyección de diapositivas predeterminada se ha 
eliminado automáticamente. 


9. Haga clic en Diseño para continuar editando el widget de proyección de diapositivas a pantalla completa. 


10. Seleccione el botón de flecha Anterior y colóquelo en lado izquierdo central de la página. Arrastre el botón de flecha Siguiente hacia el lado 
derecho central de la página, alineado horizontalmente con el botón Anterior. A continuación, arrastre la ventana de Pie de ilustración hacia 
la parte inferior, de forma que se centre y se sitúe a unos 40 píxeles del borde inferior. 


Nota: Si tiene dificultades para ver toda la página, establezca el nivel de zoom en 75% para poder ver toda la proyección de diapositivas 
completa en modo Diseño. 


1. Configure el color de relleno de ambos botones, Siguiente y Anterior, en marrón claro. 


2. Utilice la herramienta Texto para seleccionar las flechas en los botones Siguiente y Anterior. Aplique el estilo de subtítulo y, a continuación, 
establezca la alineación en el centro, el interlineado al 100%, la opción Espacio después en 0 y el color en blanco. 


3. Configure el color de relleno del pie de ilustración en blanco, pero disminuya la opacidad en 77. Seleccione el pie de ilustración del texto de 
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marcador de posición y aplique el estilo de subtítulos. A continuación, establezca Espacio después en 0. 


4. El primer pie de ilustración muestra el texto de marcador de posición mientras se muestra la taza de café. Haga clic de nuevo en el pie de 
ilustración para seleccionar el texto que contiene. Reemplace el texto del pie de ilustración de marcador de posición por: 


Latté with fresh-ground espresso topped with premium chocolate shavings 


5. Haga clic en el botón Siguiente para ver la siguiente diapositiva con la limonada y el cuenco de limones. Reemplace el texto de pie de 
ilustración por 


The Pink Lady with fresh-squeezed lemonade and a dash of cranberry juice 


6. Actualice los restantes pies de ilustración utilizando las descripciones correspondientes: 
Chocolate-Cinnamon Swizzle Sticks available for every hot beverage 
Marshmallow Crisp Bars and Puffed Wheat Bars made fresh every morning 
Seasonal Maple Walnut Cupcakes 
Tart yet sweet Lemon Meringue Pie with fresh lemon juice and lemon zest 
Katie's Café relies on the freses organic ingredients purchased daily 


Grilled Cheese with Rye Bread accompanies our home-made Gazpacho soup 


7. Seleccione Archivo > Vista previa de sitio en navegador para ver la proyección de diapositivas finalizada. Obsérvela con la reproducción 
automática, o bien utilice los botones de navegación para desplazarse a la imagen siguiente y anterior, mientras se muestran los pies de 
ilustración descriptivos en cada diapositiva (véase la Figura 59). 


=> KATIE'S CAFE = HOME MINU GALLERY BLOG CONTACT 


Grilled Cheese wich Rye Bread accompanies our aer =. ? 
à 


Figura 59. El widget de proyección de diapositivas a pantalla completa aparece en los bordes de la ventana del navegador. 


18. Haga clic en el elemento de menú de galería para visitar la página Galería. Recuerde siempre ofrecer a los visitantes una forma de salir de 
un widget de proyección de diapositivas a pantalla completa, cuando deseen volver al resto del sitio. Desplácese por el vínculo: VIEW 
GALLERY FULLSCREEN y observe cómo cambia el color en Pasar por encima y Ratón pulsado en función de los ajustes de estilo del 
vínculo predeterminados. 


19. Vuelva a Adobe Muse y cierre la página Galería: Pantalla completa en modo de diseño. 


Ir al principio 


Formato de texto en la parte superior de la página Blog 


La página Blog muestra un encabezado descriptivo sobre una página de blog de Tumblr incrustada. 
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. Abra la página Blog en modo de diseño. 
. Si las guías no están aún visibles, seleccione Ver > Mostrar guías. 
Cree un marco de texto y escriba: KATIE'S BLOG. Aplique el estilo de párrafo de encabezado. 


. Arrastre una copia del separador de página del panel Biblioteca. 


N.aGQNR 


. Utilice la herramienta Selección para centrar los dos elementos verticalmente en la página (véase la Figura 60). 


Kail KATIE'S CAFE kad HOME MENU GALLERY CONTACT 


! KATIE'S BLOG 


++ 


Figura 60. Centre el título de la página y el separador de página en la página debajo del encabezado. 


Ir al principio 


Uso de HTML incrustado para mostrar un blog en un sitio de Muse 


El código HTML incrustado hace referencia al código fuente generado por un sitio web de terceros Google Maps, YouTube, SoundCloud, Flickr o 
Picasa. Puede configurar cuentas con estos sitios web, iniciar sesión y, a continuación, copiar el código incorporado de estos sitios y añadirlo al 
sitio. 

Pegar HTML incrustado en una página, es como colocar una ventana dentro de una página en su sitio que muestra el contenido de un sitio de un 
tercero en la misma. 


HTML incrustado es un método excelente para añadir información compleja (por ejemplo, mapas, previsiones meteorológicas, cotizaciones en 
bolsa), además de contenido multimedia (como vídeos digitales, proyecciones de diapositivas y archivos de audio) de forma rápida y sencilla. 


Para añadir un blog a la página Blog, deberá copiar el código fuente generado porTumblr.com. El servicio en línea gratuito le permite iniciar 
sesión y publicar las entradas del blog que son públicas. Los blogs son fáciles de utilizar y útiles cuando desea que sea más sencillo para que 
algún usuario que no tiene muchos conocimientos técnicos pueda actualizar su propio sitio. La mayoría de sitios de blogs incluyen una interfaz en 
línea, por lo que se puede utilizar cualquier navegador para iniciar sesión en su cuenta y publicar nuevas entradas, sin necesidad de tener 
conocimientos sobre HTML o software adicional. 


Nota: Los visitantes no necesitan una cuenta de Tumblr para ver los blogs incrustados en una página. Necesita una cuenta para generar el 
código al diseñar el sitio, para iniciar sesión y añadir las entradas del blog. 


1. No es necesario crear una cuenta en Tumblr para continuar. Copie el código que aparece debajo (generado por el sitio web de Tumblr al 
crear un blog gratis): 


<iframe src="http://katiessf.tumblr.com/" width="916" height="3500" marginwidth="0" marginheight="0" frameborder="no" scrolling="no" 
style="border:0px;"></iframe> 


2. En modo Plan, haga doble clic en la miniatura de la página de blog para abrir la página en modo de diseño. 


3. Haga clic en medio de la página de blog vacía y seleccione Objeto> Insertar HTML. Haga clic dentro del campo de la ventana Editar 
HTML que aparece y pegue el contenido. Haga clic en OK para cerrar la ventana Editar HTML. 


Después de incrustar el código HTML, verá un cuadro delimitador de color azul con manejadores alrededor de las publicaciones del blog 
que se incluyeron para la cuenta de Tumblr de Katie's Café. 


4. Utilice la herramienta Selección para arrastrar los manejadores y centrar el contenido del blog en la página. Las guías de alineación azul 
oscuro indican si el objeto seleccionado está centrado verticalmente (véase la Figura 61). 
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Bread is on the Rise! 


Figura 61. Coloque el blog de Tumblr para centrarlo en la página Blog. 


Eso es todo lo que se necesita para incorporar código HTML en las páginas de Muse. Si alguna vez desea editar el código HTML, puede hacer 
clic con el botón derecho en un elemento HTML incrustado y elegir Editar HTML en el menú contextual que aparece. De este modo, se abre la 
ventana Editar HTML para que pueda acceder al código pegado anteriormente (véase la Figura 62). 


Cortas 


KATIE'S BLOG 


Pegar — ~ og 
Seleccionar el mismo tipo [HTML incrustado! 


Organizar » 
Mover a capa » 
Añade a la biblioteca 


e ” 3read is on the Rise! 2414 
bitar OIML 


Ocultar 


Elemento de pie de pigera Códgo HTML 


[<iframe src= "eng / katusa tumbi com” width=916" heght="3 500 margissedit="U" marginheighi="0" 
|trametonder=" ns" serailisg= "ne" style= "border Opa,» </iframe> 


Figura 62. Para acceder y editar el código fuente incorporado, abra la ventana Editar HTML. 


6. Seleccione Archivo > Vista previa de página en navegador para ver la página Blog en una nueva ventana del navegador. 


Tenga en cuenta que cuando se desplaza hacia abajo por la lista de entradas del blog, el encabezado marrón aparece en la parte superior del 
contenido de la página del blog. Este comportamiento se debe a que el encabezado está en la página maestra Interior y el contenido en las 
páginas maestras se muestra delante de forma predeterminada. 


Ahora que ha aprendido a añadir HTML incrustado para mostrar un blog de Tumblr, continúe en el capítulo 6 para obtener más información sobre 
cómo añadir un mapa de Google interactivo a la página Contenido. Después de añadir un widget de formulario de contacto en la página Contacto, 
aprenderá a añadir un icono de favorito y publicar el sitio de prueba. 


Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook. 


Avisos legales | Política de privacidad en línea 
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Capítulo 6 


Uso de HTML incrustado para mostrar un mapa de Google 

Adición y configuración de un widget de formulario de contacto sencillo 
Configuración de todo el widget de formulario de contacto sencillo 
Configuración de elementos de formulario individuales 

Aplicación de estilo al aspecto de los campos de formulario de contacto 
Aplicación de estilo al aspecto del botón Enviar 

Prueba del formulario y recuperación de mensajes enviados 

Aplicación de estilo a las direcciones enumeradas en la página Contacto 
Uso del corrector ortográfico y actualización del diccionario 

Adición de un icono de favorito al panel Propiedades del sitio 

Creación de una versión de prueba gratuita para publicar en el sitio 


En el capítulo 5 del tutorial de creación del primer sitio web con Muse, ha aprendido a crear vínculos a etiquetas de anclaje para saltar a 
secciones de una página larga. También ha creado y aplicado estilo a un widget de proyección de diapositivas a pantalla completa. En la 
siguiente parte, verá cómo se añade un mapa interactivo de Google con HTML incrustado. A continuación, trabajará con un widget de formulario 
de contacto para crear la página Contacto. Y por último, aplicará los toques finales añadiendo un icono de favoritos y luego publicará el sitio de 
prueba completo. 


Ir al principio 


Uso de HTML incrustado para mostrar un mapa de Google 


Google Maps es un servicio gratuito: solo tiene que indicar la dirección (o direcciones) y hacer clic en el botón de creación de mapas tras iniciar 
sesión en su cuenta. Introduzca un título y una descripción y, a continuación, haga clic en el botón Incrustar. Copie el código HTML proporcionado 
en el campo etiquetado como Pegar HTML para incrustarlo en el sitio web. 


1. En modo Plan, haga doble clic en la miniatura de la página Contacto para abrirla en el modo Diseño. 
2. Copie el código fuente que aparece a continuación, generado por el sitio de Google Maps: 


<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms? 
¡e=UTF88amp;hl=engamp;msa=08amp;msid=218302982680021663941.00049fcd9cf93276f540e£amp;ll=37.7737,- 
122.437828amp;spn=0.067844,0.098877£amp;z=128.amp;output=embed"> 

<liframe> 


Puede crear un mapa personalizado para una o más direcciones. En este ejemplo, el mapa muestra punteros para cada una de las tres 
ubicaciones de Katie's Café en San Francisco. 


3. Pegue el código cerca de la parte superior de la página de contacto. Utilice la herramienta Selección para colocar el HTML incrustado y 
centrarlo en la página, de modo que la parte superior del mapa aparezca debajo del área de encabezado (véase la Figura 63). 
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Figura 63. Pegue el código de incrustación de Google Maps y colóquelo en la página debajo del encabezado. 


4. Utilice la herramienta Texto para arrastrar un marco de texto debajo del mapa incrustado y escriba Contacto. 

5. Aplique el estilo de encabezado al marco de texto. 

6. Cree otro marco de texto debajo del título de la página. Copie el siguiente texto y péguelo en el marco de texto: 
While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to 
detail, commitment to service, and, above all, enjoyment of good food. 

7. Aplique el estilo del cuerpo y alinee el marco de texto a la izquierda de la página. 


8. Presione Opción/Alt y arrastre una copia del marco de texto y alinéela a la derecha de la página. Seleccione el texto y reemplácelo por este 
contenido: attention to detail, commitment to service, and, above all, enjoyment of good food. 


9. Utilice la herramienta Selección para seleccionar los párrafos izquierdo y derecho y elija Objeto > Grupo. 
10. Arrastre una copia del separador de página del panel Biblioteca. 
11. Utilice la herramienta Selección para centrar los tres elementos (texto de encabezado, grupo de dos columnas de texto y gráfico de 
separador de página) y alinearlos verticalmente en la página. 
12. Seleccione Archivo > Vista previa de página en navegador para ver cómo la página Contacto en curso aparece en un navegador (véase la 
Figura 64). 


900. goma a s 


È computer 33334/Prevew/katiesCafe/ contaci hirm z 


= KATIE'S CAFE w MENU GALLERY 


CONTACT US 


While each of our bakeries embodies the unique attributes of its attention to detail commitment to service, and, above all, 
neighborbood, they are all bound togetber by Katie's impeccable enjoyment of good food. 


++ 


Figura 64. La página de contacto terminada incluye un mapa completamente funcional de Google. 


El mapa de Google HTML incrustado es interactivo. Haga clic en las flechas para desplazarse por el mapa y haga clic en los botones con los 
signos más (+) y menos (-) para aumentar o reducir la imagen. 


13. Cierre el navegador y vuelva a Muse para continuar editando la página. 


Las proyecciones también se pueden añadir directamente a las páginas, pero en este ejemplo, puede anidar un widget de proyección de 
diapositivas de miniaturas dentro del área de contenido de un widget de panel en fichas. Siga estos pasos: 


1. Durante la edición de página acerca de en la vista Diseño, haga clic en la ficha Gallery (galería) para ver el contenedor del área de 
contenido con el contenido del marcador de posición que aparece debajo de él. 


2. Seleccione el contenido del marcador de posición (el marco de la imagen y el marco de texto dentro del área de contenido) y elimínelo. 


3. Abra la biblioteca de widgets y expanda la sección Proyección de diapositivas. Seleccione el widget de proyección de diapositivas de 
miniaturas de la lista y arrastre una copia del mismo a la página (consulte la Figura 59). 


Ir al principio 


Adición y configuración de un widget de formulario de contacto sencillo 
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A continuación, añadirá un formulario de contacto a la página Contacto para que a los visitantes les resulte más fácil enviar mensajes a través del 
sitio web. 
1. Continúe con la edición de la página Contacto en modo Diseño. 


2. En Biblioteca de widgets, expanda la sección Formularios. Seleccione el widget de formulario de contacto sencillo y arrástrelo al lado 
derecho de la página Contacto, bajo el separador de página (véase la Figura 65). 


+ Biblioteca de widgets 


DO IÓ e o LE a EEAS x 
Correo electrónico: 


Mensaje: 


Enviar 


Figura 65. Arrastre el formulario Contacto (sencillo). 


3. Utilice la herramienta Selección para establecer la posición del formulario en el lado derecho de la página. 


Ir al principio 


Configuración de todo el widget de formulario de contacto sencillo 


Actualice la configuración del widget de formulario de contacto para controlar cómo funciona. 


Normal 

Envío en curso 
Enviado correctamente 
Error de envío 


1. Mientras todo el formulario está seleccionado, el indicador de selección muestra la palabra Formulario e indica que el formulario se está 
mostrando actualmente en su estado Normal. 


2. El vínculo Normal es un menú con cuatro estados posibles, al igual que los botones o elementos de menú (véase la Figura 66): 
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Envío en curso 


Enviado correctamente 


Error de envío 


Figura 66. El menú Estados muestra los estados de todo el formulario. 


Si desea ajustar el formulario tal como aparece en diversos estados, puede seleccionar el nombre de estado correspondiente en este menú o en 
el panel Estados. 


Por ejemplo, si selecciona el estado Error de envío, verá que el formulario se actualiza para mostrar el mensaje de error. Mientras el estado Error 
de envío está seleccionado, puede ajustar el aspecto del mensaje de error. Por ejemplo, podría cambiar el contenido de texto o cambiar el color 
del texto de error de rojo a azul. 


3. Mientras todo el formulario continúa seleccionado en el estado Normal, haga clic en la flecha azul para acceder al menú Opciones. En el 
campo Enviar por correo electrónico a, introduzca su dirección de correo electrónico. Deje la configuración predeterminada para el resto de 
ajustes (véase la Figura 67). 


Nombre Y Opciones 
Nombre del formulario: CONTACT Form 


Enviar por correo electrónico a: emalladdress.com 


Después de enviar: Permanecer en página actual 
Campos estándar 
Mensa Y Nombre Empresa 
Número de teléfono mów Número de teléfono del trabajo 
Número de teléfono del domicilio Dirección del trabajo 
Dirección de domicilio Sitio web 
reCAPTCHA CAPTCHA de BC 
Agregar campos personalizados 
Texto en una sola línea Texto en varias líneas 


Casilla de verificación 


Y Editar conjuntamente 


Figura 67. El menú Opciones muestra la configuración de todo el formulario de contacto. 


Dedique unos minutos a familiarizarse con las opciones disponibles 


Nota: Si desea que los envíos de formulario se reenvíen a varias direcciones de correo electrónico, puede introducir las direcciones (separadas 
por punto y coma) en el campo Enviar por correo electrónico a. 


En el menú Después de enviar, puede elegir entre dos opciones: 


e Permanecer en la página actual (comportamiento predeterminado) 
e Elegir una página diferente (o un archivo vinculado) para mostrar después del envío del formulario 


El sitio de ejemplo solo utiliza los tres campos de formulario predeterminados, pero tenga en cuenta que puede añadir otros campos activándolos 
en el panel Opciones. 


La lista de otros campos estándar incluye: 
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Número de teléfono móvil 
Número de teléfono del domicilio 
Dirección de domicilio 
CAPTCHA de BC 


Empresa 

Número de teléfono del trabajo 
Dirección del trabajo 

Sitio web 


Si desea añadir uno de estos campos, simplemente active la casilla de verificación. 
También puede añadir campos personalizados con las opciones Texto en una sola línea y Texto en varias líneas. 


Haga clic en el botón con el signo más (+) junto al campo personalizado que desee añadir y, a continuación, introduzca la etiqueta en la vista 
Diseño para describir el nuevo elemento de campo de formulario que va a añadir al formulario. 


Ir al principio 


Configuración de elementos de formulario individuales 


Al seleccionar los elementos de formulario, el indicador de selección muestra el nombre del elemento, como Etiqueta, Introducción de texto o 
Enviar. Compruebe el indicador de selección con frecuencia para ver qué elemento anidado en el formulario está seleccionado en ese momento. 


1. Haga clic en todo el formulario una vez para seleccionarlo y, a continuación, haga clic en el campo Nombre de nuevo. En primer lugar, el 
indicador de selección muestra Formulario y, a continuación, Campo de formulario. 

2. Cuando se selecciona un elemento de formulario Campo de formulario, Etiqueta o Introducción de texto y se hace clic en el botón de flecha 
azul para acceder al menú Opciones, las opciones que se proporcionan ofrecen valores de configuración relacionados específicamente con 
ese elemento. Para este sitio, asegúrese de que las opciones Entrada obligatoria y Mostrar texto de solicitud cuando está vacío están 
activadas y desactive las opciones Etiqueta y Texto del mensaje (véase la Figura 68). 


Opciones del campo Nombre 


V Entrada obligatoria 


Correo electrónico Y Mostrar texto de solicitud cuando esté vacio 
Partes 
Etiqueta 
Mensaje 


Texto del mensaje 


Enviar 


Figura 68. El menú Opciones muestra un conjunto de opciones contextuales correspondientes al elemento de formulario seleccionado. 


Nota: Entrada obligatoria significa que se mostrará un mensaje de error y que el formulario no se enviará si el visitante intenta enviarlo sin 
introducir contenido en el campo. 


3. Repita el paso 2 para configurar el campo de formulario Correo electrónico de la misma forma que el campo Nombre. 


4. Actualice el campo de formulario Mensaje. Esta vez, la única opción que debe estar activada es Mostrar texto de solicitud cuando está 
vacío. 


Después de realizar estos cambios, ya no aparecerán las etiquetas de texto sobre cada campo. 


Ir al principio 


Aplicación de estilo al aspecto de los campos de formulario de contacto 


Mientras un elemento de formulario y un estado específico están seleccionados, puede utilizar el panel Relleno o el panel de control para ajustar 
su aspecto. 


Los estados de los campos de formulario son: 


Vacío 
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No vacío 
Rollover 
Resaltado 
Error 


1. Seleccione el campo de formulario Nombre y haga clic en el menú Estados cerca del indicador de selección (véase la Figura 69). 


600 Mu [ma |v] eN pf- 


Formulario; Vacio? | malleno: / [7] Tae JO + Bete: EJ] 100 |7] d C made página mudos xfoizzo Ives ] 
+ = a 


lorreo electrónico: 


Mensaje 


Enviar 


Figura 69. Acceda a la lista de estados disponibles para cada elemento de formulario. 


2. Haga clic en el campo una vez más para seleccionar Introducción de texto (hace referencia al tipo de campo). Con el estado Vacío 
seleccionado, establezca el color de relleno del campo en Ninguno, el color del trazo en Marrón y el grosor del trazo en 1. 


3. Haga clic de nuevo dentro del campo Nombre para seleccionar el texto. Utilice la herramienta Texto para reemplazar el texto 
predeterminado de Introducir nombre por: NAME. 


4. Aplique el estilo de párrafo de serifa de subtítulo y luego restablezca la fuente en Gentium Book Basic y establezca el valor de Sangría 
izquierda en 7. 


5. Repita los pasos del 2 al 4 para aplicar estilo al estado Vacío para los campos de formulario Correo electrónico y Mensaje. 


6. Seleccione de nuevo el campo Nombre. Esta vez elija el estado No vacío. Establezca el color de relleno del campo en blanco y tenga en 
cuenta que los otros estados se actualizan automáticamente. 


7. Repita el paso 6 para aplicar estilo al estado No vacío para los campos de formulario Correo electrónico y Mensaje. 
8. Actualice el texto del campo Correo electrónico A EMAIL y actualice el texto del mensaje a HOW CAN WE HELP YOU? 


Ir al principio 


Aplicación de estilo al aspecto del botón Enviar 


A continuación, definirá las opciones de formato de texto y relleno para el botón Enviar. 


Normal 
Rollover 

Ratón pulsado 
Envío en curso 


En este ejemplo, todos los estados del botón Enviar muestran texto blanco, pero tenga en cuenta que podría elegir un estado diferente mientras 
el botón Enviar esté seleccionado para aplicar un estilo diferente. 


El widget de formulario de contacto se ha completado. 


1. Seleccione el botón Enviar y elija el estado Normal en el menú Estados. Los estados de un botón Enviar se muestran cuando el botón 
Enviar está seleccionado. Los estados de un botón Enviar son: 


2. Con el estado Normal seleccionado, establezca el color de relleno del botón en Marrón claro. 


3. Seleccione el estado Rollover y establezca el color de relleno en Marrón. Tenga en cuenta que todos los otros estados se actualizan 
automáticamente. 


4. Elija el estado Normal de nuevo para el botón Enviar. Utilice la herramienta Texto para seleccionar el texto y actualícelo a SEND 
MESSAGE. Puede cambiar el ancho del botón según sea necesario. 


5. Aplique el estilo de subtítulo y, a continuación, establezca la alineación en el centro, establezca Espacio después en 0 y el color en Blanco. 
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Tenga en cuenta que todos los otros estados se actualizan para utilizar el mismo formato para el texto. 


Ir al principio 


Prueba del formulario y recuperación de mensajes enviados 


Después de configurar y aplicar estilo al formulario, asegúrese de guardar el sitio. Más adelante, al publicar el sitio, puede probar el formulario en 
un navegador para comprobar que funciona correctamente. 


1; 


Visite la página con el formulario de contacto e interactúe con él en el sitio activo. Intente enviar el formulario sin introducir contenido en los 
campos obligatorios. Pruebe el funcionamiento del formulario y preste especial atención al modo en que se muestran los mensajes de error. 


Una vez que haya determinado que el formulario funciona y se muestra del modo previsto, pruebe a enviar el formulario con un mensaje de 
prueba. Compruebe su cuenta de correo electrónico y verifique que ha recibido el mensaje en su bandeja de entrada. 


Ir al principio 


Aplicación de estilo a las direcciones enumeradas en la página Contacto 


Siga estos pasos para añadir las tres direcciones de Katie's Café a la izquierda del formulario de contacto. 


1, 


Utilice la herramienta Texto para dibujar un marco de texto a la derecha de la página. Copie y pegue (o escriba) lo siguiente: 


KATIE'S CAFE NOE VALLEY 
123 ELIZABETH STREET 


Monday - Friday 06:00 - 22:00 
Saturday - Sunday 07:00 - 22:00 


2. Seleccione las dos líneas superiores y aplique el estilo de subtítulo. A continuación, establezca el tamaño en 16 y Espacio después en 0. 


3. Seleccione el texto restante (días y horas) y aplique el estilo del cuerpo. 


4. Presione Opción/Alt y arrastre una copia del párrafo hacia abajo. Reemplace el contenido del texto por este: 


KATIE'S CAFÉ COLE VALLEY 
301 CARMEL STREET 


Monday - Friday 07:00 - 22:00 

Saturday - Sunday 09:00 - 22:00 

Duplique el segundo marco de texto para crear una tercera dirección. Reemplace el contenido del texto por este: 

KATIE'S CAFÉ LAUREL HIEGHTS 

800 SPRUCE STREET 

Monday - Friday 05:00 - 22:00 

Saturday - Sunday 07:00 - 22:00 

Utilice la herramienta Selección para alinear los tres marcos de texto a lo largo del lateral izquierdo de la página y colóquelos de modo que 


haya la misma cantidad de espacio (aproximadamente 30 píxeles) entre cada uno. 


Ir al principio 


Uso del corrector ortográfico y actualización del diccionario 


Adobe Muse incluye un corrector ortográfico que hace que sea muy fácil buscar y resolver errores ortográficos en los marcos de texto. El 
corrector ortográfico está siempre activado. Todas las palabras que no están en su diccionario aparecen subrayadas en rojo. Por ejemplo, la 
palabra incorrecta HIEGHTS aparece subrayada en el tercer marco de texto (véase la Figura 70). 
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KATIE'S CAFE NOE VALLEY 

123 ELIZABETH STREET 

Monday - Friday 06:00 - 22:00 
Saturday - Sunday 07:00 - 22:00 


KATIE'S CAFE COLE VALLEY 
301 CARMEL STREET 
Monday - Friday 07:00 - 22:00 


Saturday - Sunday 09:00 - 22:00 


800 SPRUCE STREET 
Monday - Friday 05:00 - 22:00 
Saturday - Sunday 07:00 - 22:00 


Figura 70. Las palabras con errores ortográficos se subrayan en rojo. 


1. Para corregir el error tipográfico, utilice la herramienta Texto para seleccionar la palabra (haga doble clic en ella para seleccionarla) y, a 
continuación, haga clic con el botón derecho del ratón para ver una lista de palabras sugeridas. 

2. Si una de las palabras sugeridas es correcta, pulse la flecha abajo o haga clic en la palabra sugerida que desea utilizar y, a continuación, 
pulse Retorno/Intro para aplicarla. Si comete un error y selecciona la palabra equivocada, simplemente deshaga el cambio (Editar > 
Deshacer) y, a continuación, elija otra palabra sugerida o edite la palabra con la herramienta Texto. En este caso, elija la ortografía correcta: 


HEIGHTS. 
Si una palabra marcada como error tipográfico se utiliza solo una vez (por ejemplo, el nombre o la ubicación de una persona) y sabe que está 
escrito correctamente, no es necesario arreglarla. El subrayado rojo que ve en el modo Diseño no aparece al realizar una vista previa, publicar o 
exportar un sitio. 


Cuando se trabaja con palabras que se utilizan habitualmente, como nombres o direcciones de negocios, puede añadir la palabras al diccionario 
del corrector ortográfico para que no se marquen como errores tipográficos. 


Utilice la herramienta Texto para hacer clic con el botón derecho en la palabra que quiere añadir al diccionario y, a continuación, seleccione la 
opción Añadir al diccionario en el menú contextual que aparece. 


Puede seleccionar el idioma deseado (que, a su vez define el idioma del diccionario del corrector ortográfico) para todo el sitio y los cuadros de 
texto individuales. 


Para configurar el diccionario del corrector ortográfico para todo el sitio, seleccione Archivo > Propiedades del sitio. Haga clic en la ficha 
Contenido, seleccione el idioma deseado en el menú Idioma y, a continuación, haga clic en OK (véase la Figura 71). 
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ETT 
Normal: E A O 
Pasar por encima: a a o 
Visitado: o Œ go 
z: M E E o 
M Activar estado activo para enlaces de anclaje 
Idioma: Imágenes: 
CE EZ Convertir PNG opaco en JPEG 
Activar edición en navegador Resolución: e 
E Activar para texto sincronizado 
Interlineado de redondeo para números enteros 


o Conca JE 


Figura 71. Configure el idioma para todo el sitio en el cuadro de diálogo Propiedades del sitio. 


A veces es necesario proporcionar texto en varios idiomas para los proyectos de sitio. En estos casos, se puede establecer el idioma 
predeterminado (utilizado más frecuentemente) en las propiedades del sitio y, a continuación, establecer el idioma del corrector ortográfico para 
determinados marcos de texto con contenido en un idioma diferente. 


Para configurar el diccionario del corrector ortográfico para un marco de texto, seleccione un marco de texto con la herramienta Selección. Haga 
clic con el botón derecho del ratón y elija Idioma > (Elija el idioma deseado) en el menú contextual que aparece (véase la Figura 72). 


While each of our bakeries embodies the unique attributes of its attention to detail, comm 
neighborhood, they are all bound together by Katie's impeccable enjoyment of good food. 


[Idioma del sitio] Español 
[Idioma de página] Español 
v [Ninguno] 
Alemán f 
Alemán (Suiza) 
Árabe 
> o o Búlgaro 
TIE'S CAFE NOE VALLEY Catalán 
NAME 
23 ELIZABETH STREET Checo 
Croata 
‘Monday - Friday 06:00 - 22:00 la Danés F 
aturday - Sur * DHAWA Eslovaco 
Esloveno 
e Copiar 
KATIE'S CAFE CU Pegar Estonio 


301 CARMEL ST Seleccionar el mismo tipo (Marco de texto) emana (Canadá) 
Monday - Frid 


Griego 
> 
Saturday - Sur Organizar 


Mover a capa > oa 

Añadir a la biblioteca inglés (Canadá) 
KATIE'S CAFE L4 a Inglés (EE. UU.) 

800 SPRUCE STI Ocultar Inglés (Reino Unido) 


Monday - Frid Italiano 
Elemento de pie de página Letón 
Saturday - Sur pa 


Neerlandés 
Noruego (Bokmål) 
Noruego (Nynorsk) { 
Polaco 
Portugués 
Portugués (Brasil) 
Rumano 
Ruso 
Sueco 
Turco 


[ 


Cortar 
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Figura 72. Configure el idioma seleccionado para el marco de texto seleccionado en el menú contextual. 


El diseño del sitio está ahora terminado en todas las páginas. En las siguientes secciones de este tutorial, verá cómo dar los toques finales y 
publicar el sitio como una versión de prueba gratuita. 


Ir al principio 


Adición de un icono de favorito al panel Propiedades del sitio 


Un icono de favorito es una pequeña imagen cuadrada que usted crea, añade a un sitio y carga para personalizar los marcadores y las URL. El 
icono de favoritos normalmente aparece en la barra de direcciones del navegador. Muchos navegadores también lo muestran junto a un nombre 
de página cuando tiene un marcador, o en una ficha que contiene una página de sitio cargada. Utilice cualquier programa de edición de imágenes 
como, por ejemplo, Photoshop o Illustrator, para crear un archivo de imagen cuadrado (igualmente proporcionado) para utilizar como archivo de 
icono de favoritos. 


Siga estos pasos para agregar un icono de favorito al sitio: 


1. Seleccione Archivo > Propiedades del sitio. El panel Propiedades del sitio aparece. 


2. En la ficha de diseño, haga clic en el icono de carpeta situado a la derecha de la sección de icono de favorito. Utilice el cuadro de diálogo 
que aparece para elegir una imagen de icono de favorito para buscar en la carpeta de archivos de ejemplo y seleccionar el archivo 
denominado favicon.png (consulte la Figura 73). 


While each of cur bakeries embodies the unique attributes of its Aupedadn de wbo 
neighborhood, they are all bound together by Katie's Impeccable 
Dimna] coer | 
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SEND MESSAGE 


Figura 73. Establezca el archivo favicon.png en las Propiedades del sitio. 


3. Haga clic en Abrir para seleccionar el archivo y cierre el cuadro de diálogo para elegir una imagen de icono de favoritos. A continuación, 
haga clic en Aceptar para cerrar el cuadro de diálogo Propiedades del sitio. 


4. Seleccione Archivo > Vista previa de página en navegador. Observe la parte superior de la ventana del navegador para ver el icono de 
favoritos que aparece en la barra de direcciones. Si el sitio se ha cargado en una ficha, es posible que también vea que se muestra allí. 
Pruebe a marcar la página, para ver cómo se muestra el icono junto al nombre de la página en la lista de marcadores. 


Ahora que el sitio se ha finalizado, el siguiente paso implica cargar el sitio a los servidores de alojamiento de Adobe proporcionados. 


Ir al principio 


Creación de una versión de prueba gratuita para publicar en el sitio 


Una vez que haya terminado de diseñar su sitio, el siguiente paso es publicarlo. Al ejecutar por primera vez Muse, ha introducido un ID de Adobe 
para iniciar sesión. Utilice el mismo nombre de usuario y contraseña para publicar todos los sitios de Muse. 


1. Haga clic en el vínculo Publicar en la parte superior del panel de control. El panel Publicar parece que le permite introducir un nombre de 
sitio y elegir la URL temporal (véase la Figura 74). 
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kad KATIE'S CAFE -~ HOME MENU GALLERY BLOG 


While each of our bakeries embodies the unique attributes ofits attention to detail, commitment to service, and. above all, 
neighborhood, they are all bound together by Katie's impeccable enjoyment of good food. 


Figura 74. Introduzca el nombre del sitio y la dirección URL que desee utilizar para su sitio de prueba. 


2. Haga clic en OK para comenzar el proceso de publicación. 


Puede tardar unos minutos en cargar los archivos en el servidor remoto. Cuando haya terminado de cargar, la página de inicio del sitio, aparece 
en una nueva ventana del navegador. 


3. Haga clic en los vínculos de la navegación de nivel superior del sitio para visitar las páginas e interactuar con los widgets. Revise todas las 
páginas y asegúrese de que los elementos se muestran de la forma esperada. Tome nota de los problemas que se deben arreglar. 


4. Cuando haya terminado, cierre el navegador y vuelva a Muse. 


El panel Publicar se actualiza y muestra un botón Aceptar y un vínculo Gestionar, en el que puede hacer clic cuando esté listo para publicar el 
sitio activo (que implica el inicio del plan de alojamiento de pago, y la configuración de un nombre de dominio personalizado para acceder al sitio, 
y añadir usuarios). 


Su sitio publicado utilizará una URL similar a la que se presenta a continuación. Utilizará esta dirección para obtener acceso a las páginas en un 
navegador y compartir el sitio activo con otros: 


http: //my-new-website.businesscatalyst.com 


Una vez que el sitio de prueba se publique, copie la dirección URL en la barra de direcciones y envíe el vínculo a los clientes, para que puedan 
revisar la versión activa del sitio. Los clientes pueden revisar el diseño, probar las funciones interactivas en un navegador y aprobar el ejemplo de 
funcionamiento de las páginas. 


Una vez que sus clientes o colegas revisen el sitio de prueba, pueden solicitar cambios. 


Si desea actualizar un sitio de prueba existente, puede abrir el archivo .muse y continuar editando las páginas. Cuando haya terminado las 
actualizaciones, vuelva a hacer clic en Publicar. 


Esta vez, si desea sobrescribir el sitio de prueba con los nuevos cambios, elija: Cargar: Solo archivos modificados. 


Si decide actualizar el nuevo contenido, visite siempre el sitio activo actualizado y verifique que los cambios que ha realizado funcionan y se 
muestran como esperaba. 


Para obtener más información sobre la publicación de su sitio de prueba, consulte Publicación de sitios web. 
Más información 
e Ayuda de Adobe Muse 


e Servicio de soporte y aprendizaje de Adobe Muse 
e Introducción a Adobe Muse 


Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook. 


Avisos legales | Política de privacidad en línea 
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